前面提到过，CSS 是由一条一条规则构成的，规则由选择器和声明块构成，声明块中的声明在 2.常见样式声明已经介绍地差不多了，这里介绍选择器。
选择器的作用就是选择元素，我们要为一个或者一些元素设置样式，首先就应该确定我要为哪一些元素设置样式，或者说要把我想要设置样式的元素选择出来，这就是选择器的作用。一句话就是，选择器用于精准选择想要的元素
简单选择器
ID 选择器，类选择器，元素选择器在 1.网页的样式 已经介绍过，这里不再赘述。
通配符选择器
通配符选择器用 * 表示，表示选择所有元素。
css
*{
color:red;
}以上 CSS 规则将所有元素的字体颜色设置为了红色。
属性选择器
根据属性名和属性值来选择元素，写法为：[属性名="属性值"] 或 [属性名]
css
[href]{
color:red;
}
[href="http://www.baidu.com"]{
font-weight:bold;
}以上两个 CSS 规则，第一个规则将所有包含 href 属性的元素字体颜色设置为红色，第二个规则将 href 属性为 http://www.baidu.com 的元素字体加粗。
除了以上写法以外，属性选择器还有多种高级写法，这里无法一一列举，可以参考以下 MDN 文档：
属性选择器 - 学习 Web 开发 | MDN
伪类选择器
用于选中某些元素的某种状态，伪类选择器的用法是在前面加冒号，这里在后面的例子中可以见到，这里介绍常见的伪类选择器。
hover
hover 表示鼠标悬停状态，即鼠标悬停的元素。
css
a:hover{
color:red;
}该规则可以让鼠标悬停的 a 元素字体颜色变为红色。
active
active 表示鼠标激活状态，用于选择鼠标激活的元素，也就是鼠标按下的元素。
css
a:active{
color:red;
}a 元素鼠标按下时文字颜色变为红色。
按下是指按住不动，松开后会变回原来的颜色。
link
这是 a 元素独有的伪类选择器，表示没有被访问过的超链接。
css
a:link{
color:red;
}以上设置为将没有被访问过的 a 元素字体颜色设置为红色。
visited
和 link 对应，这个伪类用于选择被访问过的超链接。
css
a:visited{
color:red;
}以上设置为将被访问过的 a 元素字体颜色设置为红色。
伪类是书写顺序
hover, link, visited, active 是四个最常用的伪类，这四个伪类的书写要按照以下顺序
- link
- visited
- hover
- active 如果不按照这个顺序书写，由于权重的问题可能会产生一些问题。这个顺序可简单记为：爱恨法则（love hate - l v h a）
^012cd3
可能一些读者会对伪类选择器有一些误解，伪类选择器并不一定要写在某一个元素后面，单独写
:hover这个表示的是选中所有被鼠标悬停的元素，单独写:visited表示选择所有被访问过的链接。
伪元素选择器
伪元素，顾名思义，就是虚假的元素，伪元素选择器，就是在某个元素中生成一个伪元素（虚假的元素），然后选择它，这个伪元素可以当做真实元素来用，但这个元素是通过 CSS 生成的。
css
span::before{
content:"";/* 这个属性表示元素内部的文本内容 */
}写上这个之后，就让所有 span 元素的内部都添加了一个伪元素，这里添加的是 before 伪元素，before 伪元素一定位于首部，即内容之前
这个 before 就是一个伪元素，这个伪元素它就是一个用 CSS 生成的元素，content 属性可以写 before 内部的文本内容，同样可以给他设置样式。
css
span::after{
content:"";
}这里的 after 伪元素和 before 伪元素相似，只不过 before 位于内容之前，after 位于内容之后
选择器组合
并且
多个选择器不加任何东西直接连在一起，就表示并且
css
p.test{
color:red;
}这个选择器由两个选择器组成，分别是 p 和 .test，将元素名为 p 并且 class 属性为 test 的元素选中，将其文本颜色设置为红色。
从这里我们可以有这样一个认识，div[data="test"] 本质上是两个选择器合起来的，div 用于选择所有 div 元素，[data="test"] 用于选择所有 data 属性为 test 的元素。
后代元素
CSS 中允许我们选中某些后代元素
css
div p{
color:red;
}这个选择器表示选中 div 的后代元素中所有的 p 元素。
css
div p a{
color:red;
}这个选择器表示，先把 div 的后代中所有 p 元素找出来，再选择这些 p 元素的后代元素中所有的 a 元素。
后代选择器使用频率非常高。
子元素
css
div>p{
color:red;
}这个选择器表示选中 div 元素的子元素中所有 p 元素。注意这里是子元素，并不是后代元素。
相邻兄弟元素
css
div+p{
color:red;
}选择紧挨着 div 元素的 p 元素，如下结构
html
<p></p>
<div>
<p></p>
<div></div>
<p></p>
<div></div>
<a></a>
<p></p>
</div>
<p></p>
<p></p>兄弟元素
css
div~p{
color:red;
}表示选中 div 元素后面兄弟元素中所有的 p 元素
html
<p></p>
<div>
<p></p>
<div>
<p></p>
</div>
<p></p>
</div>
<p></p>
<p></p>在上例中，div 元素有两个，这两个 div 元素后面的兄弟元素中所有的 p 元素都会被选中。
CSS 并没有提供选择之前兄弟元素的功能，只能选中后面的兄弟元素
选择器并列
多个选择器用逗号分隔，就可以实现选择器的并列。
选择器的并列非常简单，就是当我们要对多个选择器设置相同样式的时候会使用到的方式。
例如我要将 class 属性为 font 的元素和所有 p 元素加粗，我可以像下面这样写
css
.font{
font-weight:bold;
}
p{
font-weight:bold;
}这样写的话，同样的样式写了两边，显然不够好，我们就可以将两个选择器并列起来。
css
.font,p{
font-weight:bold;
}这样写其实是等价的。