HTML & CSS - CSS选择器 | 王富杰的博客

一、基础选择器

上篇文章中我们已经介绍了三种基础选择器，分别为元素选择器、id选择器、类选择器。这里先进行回顾一下。使用元素选择器后，页面上所有的该元素都会应用这个CSS样式。使用id选择器，只有设置了id的元素就应用这个样式。使用类选择器，设置了class属性值的为知道名称的元素都会应用这个选择器的样式

p{
    color: yellow;
} 
#debug{
    font-size: 2em;
}
.blue{
    color: blue;
}

如上所示，页面所有p元素颜色都会为yellow。id为debug的元素字体为2em。class属性为blue的元素颜色都会为蓝色。接下来我们介绍更多的选择器。

1.1、通配符选择器

通配符选择器用 * 表示，用来选中所有元素。

*{
    color: green
}

使用通配符选择器，页面所有的元素都会应用这个样式。

1.2、属性选择器

属性选择器根据属性名和属性值来选择元素，并应用指定的样式。属性选择器使用 [] 表示，如：

[title]{
    color: green
}
[title="标题"]{
    color: green
}

使用属性选择器时，如果不写属性值，如[title]，那么所有拥有这个属性的元素都会应该该样式。当写了属性值，如[title=“标题”]，只有具有该属性且属性值也匹配的元素才会应用这个样式。注意：这里属性值的引号不可以也可以正确渲染，但是如果有特殊符号必须加上引号。

属性选择器还有更多的用法，例如[attr*=value] 当属性值包含value就会应该这个css规则，更多的用法可以查询mdn手册。

二、伪类选择器

伪类选择器是选中某些元素的某种状态，我们这里先介绍四种伪类选择器。分别为：

link: 超链接未被访问过的状态，未访问过的链接会应用这个css规则
visited: 超链接访问过的状态，访问过的链接会应用这个css规则
hover: 表示鼠标悬停状态，当鼠标悬在元素上时，应用这个css规则
active: 激活状态，当鼠标按下还没有松开时就应用这个css规则

这四个伪类选择器多用于 a 元素。

a:hover{
    color: red
}

示例如上：当鼠标悬停在a链接上时，字体会变成红色。最后当元素同时有这四个伪类选择器的css规则时，必须是lvha这个顺序。如果不按这个顺序，就可能出现某个css规则不生效。如把 :hover 写在 :link 或 :visited 之前。当鼠标悬停时，虽然元素匹配 :hover，但它同时也匹配 :link 或 :visited，而 CSS 采用“后写规则覆盖前写规则”的原则，这样 :hover 样式看不到效果

三、伪元素选择器

伪元素选择器我们先学习两个，一个是before，一个是after。伪元素选择器使用两个冒号。

strong::before{
    content: "#"
}

strong::after{
    content: "#",
    color: red
}

如上所示，就是伪元素选择器的css规则，这个规则的只有是在strong元素的前面和后边分别加一个 # 号。并且后面的字体颜色是红色。可以认为这个before和after是 strong 元素的子元素。

四、组合选择器

前面讲过的选择器都是可以组合使用的，也就是组合选择器。前边的示例其实我们已经使用了组合选择器，如 strong::before 就是元素选择器和伪元素选择器的组合。组合选择器也分为多种：

4.1、交集选择器

两个或多个选择器的交集，用法就是把两个选择器直接写在一起。

p.abc[title="段落"]{
    color: red
}

.abc.def{
    color: green
}

如上所示，交集选择器把多个选择器写在一起。例：p.abc[title=“段落”]就是选择设置了 class=“abc” 且属性title=“段落"的p元素应该这个规则。 .abc.def选择的是设置了class=“abc def"的选择，多个选择器之间没有空格。

4.2、并集选择器

并集选择器是合并相同的样式，使用逗号分隔多个选择器。即当多个选择器使用同样的样式时，就可以进行合并

h1,
strong,
.abc {
    color: red
}

如上，这个css规则的作用是把所有的 h1 、strong 以及 class=“abc"的元素都设置为红色。当然这里的选择器也可以不换行书写。

4.3、后代选择器

后代选择器的作用是在一个选择器的后代元素中找到另一个选择器所指的元素。语法是使用空格隔开多个选择器。

main p{
    color: red
}

如上这个css规则是选择 main元素中的 p元素设置颜色为红色，即main元素的后代元素中的p元素。

4.4、子元素选择器

子元素选择器是在一个选择器的子元素中找到另一个选择器所指的元素，这里注意和后代选择器的区别，子元素选择器的语法是使用>隔开选择器

main>p{
    color: red
}

子元素选择器一般用的比较少，大多使用后代选择器。

4.5、兄弟选择器

兄弟选择器包含两种，一种是相邻兄弟选择器使用 + 连接，一种是通用兄弟选择器使用 ~ 连接。

[href="baidu"]+a{
    color: red
}
[href="baidu"]~a{
    color: red
}

我们看下这两个css规则，第一个是只会选择属性href=“baidu"的元素的相邻的一个兄弟元素a。但是第二个会选择所有的兄弟元素a。需要注意一点的是，兄弟选择器只会选择它下面的兄弟，如果第一个选择器被选择的元素它上边的兄弟是不会被选择的。

五、总结

以上所介绍的选择器覆盖了大多常用的选择器，但是CSS的选择器不止于此。例如伪类选择器还有 :focus 来获取焦点，伪元素选择器可以通过::first-line获取第一行文字。更多的选择器使用可以查询mdn文档。

「真诚赞赏，手留余香」

HTML & CSS - CSS选择器

CSS选择器