一、初识层级选择器
层级选择器是CSS选择器中的一种，它可以帮助我们通过多个元素之间的关系，选择所需要的元素。好比我们在HTML中的标签嵌套，一个标签可以嵌套另一个标签，层级选择器就是利用这种父子、祖先后代等关系去选择元素的。
在CSS中，层级选择器的表示方法是将子选择器写在父选择器的后面，用空格隔开，例如：
div p {
color: red;
}
以上代码就是选择所有p标签，但要是它们是div标签的子元素。我们可以发现通过这种方式我们可以构建非常具有针对性的选择器。
二、子选择器和后代选择器
既然层级选择器是通过父子元素之间的关系来选取元素的，那它们之间的关系究竟是如何定义的。在CSS选择器中，我们常常可以用“>”符号表示子选择器，“空格”表示后代选择器。
子选择器选择的是所有直接属于父元素的子元素，而后代选择器选择的是父元素下的所有后代元素，不论直接与否。咱们看看下面的实例：
- 苹果
- 梨子
- 鸭梨
- 香梨
- 菠萝
div ul > li {
color: blue;
}
div ul li {
font-weight: bold;
}
以上代码中，第一段选择器使用了子选择器，选取的是div元素下的所有直属于ul元素的子元素li，这里就是苹果、梨子和菠萝，颜色会变成蓝色。而第二段选择器使用了空格（后代选择器），选择的是div元素下的所有li元素，包括在嵌套的ul里面的鸭梨和香梨，字体的重量会变为粗体。
三、类选择器和ID选择器
类选择器和ID选择器可以说是CSS选择器中最基本、最常用的两种类型了。
前面所说的选择器都是通过标签名、属性名等去选取元素的，但有时候我们需要选取一个由多个标签构成的元素，或者是一个唯一的元素，这时就可以使用类选择器和ID选择器了。
类选择器是通过给元素设置一个class属性，然后在样式表中通过“.”符号进行选择。例如：
.red {
color: red;
}
以上代码就是选择class属性为"red"的所有元素，并将它们的颜色都变成红色。
ID选择器也十分简单，只要在元素中设置id属性，并且在CSS样式表中使用“#”符号进行选择。例如：
#header {
font-size: 20px;
}
以上代码就是选择所有id属性为"header"的元素，并将它们的字体大小变成20px。
四、通配符选择器和属性选择器
通配符选择器是一个不带任何名字的选择器，它可以选择html文档中的所有元素。
* {
margin: 0;
padding: 0;
}
以上代码就是把文档中所有元素的margin和padding都设置为0。
属性选择器是根据元素的属性值来选取元素的，例如：
input[type="text"] {
border: 1px solid #ccc;
}
以上代码就是选择所有type属性为"txt"的input元素，并把它们的边框设置为1像素的固定宽度、#ccc的灰色。
五、伪类选择器和伪元素选择器
伪类选择器和伪元素选择器是CSS3中才有的一种选择器。它们的功能比较强大，可以根据元素处于某种状态或处于文档中的位置来选择元素。
常用的伪类选择器有:
- :hover (鼠标移动到元素上方时)
- :active (鼠标点击时)
- :focus (元素被聚焦时)
常用的伪元素选择器有:
- ::before (在元素之前插入内容)
- ::after (在元素之后插入内容)
a:hover {
color: red;
}
p::before {
content: "注：";
font-weight: bold;
}
以上代码使用了伪类选择器和伪元素选择器。第一段代码选择了鼠标移到a标签上方时，把它的字体颜色变成红色。第二段代码在所有p标签前添加了"注："，并使它加粗了。
