CSS选择器-复合选择器

选择器	名称	说明	CSS 版本
*	通用选择器	选择所有元素	2
	元素选择器	选择指定类型的元素	1
#	id 选择器	选择指定 id 属性的元素	1
.	class 选择器	选择指定 class 属性的元素	1
[attr]系列	属性选择器	选择指定 attr 属性的元素	2 ~ 3
s1,s2,s3…	分组选择器	选择多个选择器的元素	1
s1 s2	后代选择器	选择指定选择器的后代元素	1
s1 > s2	子选择器	选择指定选择器的子元素	2
s1 + s2	相邻兄弟选择器	选择指定选择器相邻的元素	2
s1 ~ s2	普通兄弟选择器	选择指定选择器后面的元素	3
::first-line	伪元素选择器	选择块级元素文本的首行	1
::first-letter	伪元素选择器	选择块级元素文本的首字母	1
::before	伪元素选择器	选择元素之前插入内容	2
::after	伪元素选择器	选择元素之后插入内容	2

复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

1.分组选择器

p,b,i,span { color: red;
}

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器

p b { color: red;
}

解释：选择

元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。

3.子选择器

ul > li { border: 1px solid red;
}

<ul>
    <li> 我是儿子 <ol>
            <li> 我是孙子 </li>
            <li> 我是孙子 </li>
        </ol>
    </li>
    <li> 我是儿子 </li>
    <li> 我是儿子 </li>
</ul>

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

4.相邻兄弟选择器

p + b { color: red;
}

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

p ~ b { color: red;
}

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

伪元素选择器

伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。

1.::first-line块级首行

::first-line { color: red;
}

解释：块级元素比如

、

等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。

2.::first-letter块级首字母

::first-letter { color: red;
}

解释：块级元素的首行字母。

3.::before文本前插入

a::before { content: '点击-';
}

解释：在文本前插入内容。

4.::after文本后插入

a::before { content: '-请进';
}

解释：在文本后插入内容。