CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/hi_Celia/article/details/121418462

一、CSS的属性选择器

1、标签名[属性名]：选择含有给定属性的标签

/*选择带有title属性的div*/

    div[title]{
        color: red;
        font-size: 25px;
    }

2、标签名[属性名=值]：选择含有给定属性值的标签

/*选择带有title属性、并且title属性的值为hz的元素*/

    div[title='hz']{
        font-size: 35px;
        font-family: '隶书';
    }

3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的

/*选择title属性值以bj开头的div*/

    div[title^='bj']{
       color: blue;
    }

4、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的

 /*选择title属性值以city结尾的div*/

    div[title$='city']{
        font-size: 55px;
        font-family: '宋体';
    }

5、标签名[属性名*=值]：选择给定属性值中包含某个字符结尾的

  /*选择title属性值中包含z_的div*/

    div[title*='z_']{
        font-family: '隶书';
    }

二、CSS的关系选择器

1、子元素选择器(用>进行连接)、

父标签 > 子标签

<style>
    div>p {
        color: red;
    }
</style>
<body>
    <div>
        <p>天王盖地虎</p>
    </div>
</body>
</html>

2、相邻兄弟关系选择器(用+、~进行连接)

a、临近兄弟选择器：同一个父元素、第二个元素必须紧跟在第一个元素后


<style>
    div>p {
        color: red;
    }
    /*选择div后的第一个p标签：临近兄弟关系*/
     div + p {
        color: blue;
    } 
</style>
<body>
    <div>
        <p>天王盖地虎</p>
        <p>长津湖之战</p>
        <p>大唐芙蓉园</p>
    </div>
    <p>宝塔镇河妖</p>
    <p>智取威虎山</p>
</body>
</html>

b、普通兄弟关系：

<style>
   /*选择div的所有兄弟p标签：普通兄弟关系*/
    div ~ p {
        color: blue;
    } 
</style>
<body>
    <div>
        <p>天王盖地虎</p>
        <p>长津湖之战</p>
        <p>大唐芙蓉园</p>
    </div>
    <p>宝塔镇河妖</p>
    <p>智取威虎山</p>
</body>
</html>

三、复合选择器：用逗号分隔

<style>
  /*复合选择器*/
    span,#gl,.hm{
        color: green;
        font-size: 45px;
    }
</style>
<body>
    <br><br>
    <span>钟楼</span>
    <br><br>
    <div id="gl">鼓楼</div>
    <div class="hm">回民街</div>
</body>
</html>

四、子元素选择器

<style>
    /*选择id为parent的标签下的所有p标签*/
    #parent p {
        font-family: '隶书';
    }
</style>
<body>
    <div id="parent">
        <p>乾陵</p>
        <p>茂陵</p>
        <p>昭陵</p>
    </div>
</body>
</html>

五、伪类选择器：

1、:hover：当鼠标悬停在目标对象上时

<style>
   #parent p:hover{
        cursor: pointer; /*cursor属性表示的是鼠标的样子*/
        color: blue;
    }
</style>
<body>
    <div>
        <p>天王盖地虎</p>
        <p>长津湖之战</p>
        <p>大唐芙蓉园</p>
    </div>
    <div id="parent">
        <p>乾陵</p>
        <p>茂陵</p>
        <p>昭陵</p>
    </div>
</body>
</html>

链接伪类选择器

2、a:visited：表示已经访问过的超链接

   3、a:link：超链接未被访问的样式

   4、a:active：激活超链接时

5、a:hover：当鼠标指针位于其上的链接

<style>
    a:link{ /*超链接未被访问时*/
        color: blue;
    }
    a:visited{ /*当超链接已经被访问*/
        font-size: 65px;
    }
    a:hover { /*当鼠标悬停在超链接上时*/
        font-size: 25px;
    }
    a:active{ /*激活超链接时*/
        font-size: 65px;
    }
    
</style>
<body>
    <a href="#">百度</a>
    <br><br>
    <a href="#">搜狐</a>
    <br><br>
    <a href="#">360</a>
    
</body>

注意：

1、为了确保生效，请按顺序声明

L :link V :visited H :hover A :active

2、想给链接指定样式，要单独给a指定样式

实际开发中的写法：

标签选择器

a{

color:gray;

text-decoration:none;

}

链接伪类选择器

a：hover{

color:red;

text-decoration:underline;

}

结构化伪类选择器
   6、:root：用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
   7、:not(element)：如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。

   8、:only-child：用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。

   9、:first-child：匹配父元素中的第一个子元素

   10、:last-child: 匹配父元素中的最后一个子元素

   11、:nth-child(n)：匹配父元素中正数第n个元素

   12、:nth-last-child(n)：匹配父元素中倒数第n个元素

13、:empty：用来选择没有子元素或文本内容为空的所有元素。

伪元素选择器
14、:before：在匹配的元素之前添加指定的内容,要和content结合使用