CSS选择器

最新推荐文章于 2022-04-26 17:58:49 发布

好事总会发生在下个转弯

最新推荐文章于 2022-04-26 17:58:49 发布

阅读量182

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/114232028

版权

前端专栏收录该内容

73 篇文章 1 订阅

订阅专栏

一、基础选择器

1、标签选择器

2、类选择器

语法："."加class名。
一个HTML标签可以定义多个class属性，在实际的应用中，类选择器成为了最灵活、应用最广泛的选择器。

3、id选择器

语法："#"加id名称。
id选择其的一般用途：

id选择器拥有最高的权限，因此可以用于覆盖之前的一些定义。
和后台数据对应，从而配合JavaScript进行一些逻辑操作。

4、通配符选择器

通配符的意思是指可以用一个符号来代替某些字符。其中*表示任意字符，以星号（ * )开始，表示该选择器可以与任意元素进行匹配。

注：通配符选择器的权重是最低的，因此只要有其他的定义，使用通配符选择器进行的定义就会被覆盖。

5、子元素选择器

子元素选择器用于表示某些特定HTML嵌套关系时的样式展现，相关的语法关键词是一个">"符号。
">"左边是父元素，右边是子元素。

注：如果两个元素不是严格的”父子关系“，则使用子元素选择器的定义不会生效。

6、后代元素选择器

后代元素选择器类似于子元素选择器，它的相关语法关键词是一个空格。

7、相邻元素选择器

相邻匀速选择器用于选取和某个元素相邻的同级元素，相关的语法关键词是一个”+“符号。
相邻元素选择器使用的条件

二者必须拥有同一个父元素。
二者相邻。

8、属性选择器

除了id、class等通用的属性，html标签中还可以含有其他的属性，如title、href、name等。相关的语法为一对中括号"[]"。
在相关的属性选择中我们还可以通过为属性附上相关的值来进行选择，同时也可以使用通配符来进行模糊匹配。

9、组选择器（相当于一个并集）

对多个元素定义同样的样式，相关的语法关键词为“,”。

10、复合选择器（相当于交集）

将两个有可能发生“与”关系的选择器连在一起。注意中间不能有空格，否则会被识别为后代选择器。
注：应用复合选择器时，标签选择器一定要写在最前面，否则无法识别。

二、伪类选择器

1、结构化伪类

（1）:nth-child(n)

“:nth-child(n)”选择器中的n表示一个简单的表达式，它可以是大于等于0的整数。
示例：

li:nth-child(2){
    background-color: #333;
    color: white;
}

n取2，就是取某个父元素内第2个<li>元素，即需要同时满足两个条件：

是不是第2个。
是不是<li>元素。
同时其相关的n值还可以用于计算，例如：:nth-child(n)相当于全选。:nth-child(2n)表示选中所有的偶数项。

注：相关计算中的字母只能使用字母n来进行表示。同时在IE6~8和FF 3-浏览器不支持":nth-child(n)"选择器。

（2）:nth-last-child(n)

":nth-last-child(n)“选择器和前面的”:nth-child(n)"相似，只是它获取元素的顺序正好相反，其是从最后一个元素开始计算。

（3）:nth-of-type(n)

"nth-of-type(n)“选择器和前面介绍的”:nth-child(n)"类似，区别在于，如果使用p:nth-child(3)与p:nth-of-type(3)这样的条件中，前者如果第3个元素不为<p>元素，这个选择器就不起作用，而后者则表示查询的是第3个<p>元素。

注：如果不加标签类型，在使用:nth-of-type(n)时就会自动选择所有并列元素的第n个。

（4）:nth-last-of-type(n)

":nth-last-of-type(n)“与”:nth-of-type(n)"很类似，区别在于获取元素的顺序相反，其是从最后一个元素开始计算。

（5）:last-child

":last-child"选择的是元素的最后一个子元素。
注：IE6不支持:first-child选择器，IE6~8不支持:last-child选择器。

（6）:first-of-type和:last-of-type

:first-of-type相当于:nth-of-type(1)，:last-of-type相当于:nth-last-of-type(1)。

（7）:only-child

如果一个父元素只有一个子元素，那么选择这个子元素。

（8）:only-of-type

当不指定type时，会导致body被选择。

（9）:root

选择文档的根元素，对于HTML文档来说，根元素永远是<html>标签。

（10）:empty

用来选择没有任何内容的元素，这里所说的没有内容指的是一点内容都没有。

2、目标伪类 :target

用于选择当前活动的目标元素。
URL前面有锚名称#，指向文档内某个具体的元素，相关的示例代码如下所示。

<!DOCTYPE>
<html>
    <style>
        :target{
            border: 2px solid #D4D4D4;
            background-color: #e5eecc;
        }
    </style>
    <a href="#a1">跳转至内容1</a> <!--点击a1链接，则内容1的背景变为:target中的位置-->
    <a href="#a2">跳转至内容2</a> <!--点击a2链接，则内容2的背景变为:target中的位置，a1恢复原状-->
    <p id="a1"><b>内容1......</b></p>
    <p id="a2"><b>内容2......</b></p>
</html>