4.5 复合选择器
复合选择器compound selector是简单选择器的一种组合：多个简单选择器连续紧跟，不允许有空格等符号，表示选择元素同时满足指定的多个条件。复合选择器除六种简单选择器外，还能够使用伪元素选择器。
4.5.1 复合选择器的基本使用
基本语法
标签名.类名#id名[属性名=属性值]:伪类名
标签名最多只能1个，如果设置必须放在开头；类名、属性可以设置多个。
示例
div.class1.class2#id1[prop1=value1][prop2=value2]
匹配元素：标签是div，且class属性同时含有class1与class2，且id等于id1、且标签属性prop1等于value1，且标签属性等于value2。
复合选择器至少包含两个条件。如果其中含有标签选择器，标签名放在最前，其它选择器的顺序任意。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
p.class1.class2{
font-size: 20px;
font-weight: 800;
}
</style>
</head>
<body>
<div>
<h4>小步教程 xiaobuteach.com</h4>
<p class="class1">第1段</p>
<p class="class2">第2段</p>
<p class="class1">第3段</p>
<p class="class2">第4段</p>
<p class="class1 class2" id="p5">第5段</p>
</div>
</body>
</html>
p.class1.class2匹配结果是第5段。
4.5.2 伪类选择器的实际运用
伪类选择器实际运用
A:伪类名称{/*样式定义*/}
A表示复合选择器的基本形式。伪类选择器在已有复合选择器后使用冒号，然后加伪类名称。继续介绍hover伪类与first-child伪类。
（1）伪类hover
需求场景：class1元素悬停时颜色变成蓝色。
.class1:hover{
color: #4aa6fc;
}
（2）伪类first-child
A:first-child
选择器A首先匹配到元素集{e1，e2，……ei…，en}，:first-child判断每个元素ei是否ei父元素的第一个子元素，如果是则匹配，如果不是则排除。项目经常出现“选择第1个子元素”的场景属于伪类first-child的逻辑。
提问。.class1:first-child匹配到哪几个元素？
.class1:first-child{
color: #4aa6fc;
}
结果是匹配到第1段与第11段，选择过程：.class1选中第1段与第11段；第1段在父元素div1是第1个子元素，满足条件；第11段在父元素div2是第1个子元素，满足条件。初学者容易误解成只有第1段。
4.5.3 伪元素选择器
伪元素选择器与伪类选择器类似，如果单独使用表示针对所有元素，实际应用场景是用作复合选择器的一部分。
伪元素选择器语法
A::伪元素名称{/*样式定义*/}
A表示复合选择器的基本形式。伪元素选择器在已有复合选择器后使用两个冒号，然后加伪元素名称。伪元素名称是由CSS规范定义，每个伪元素名称有特定用途。项目常用伪元素::before与::after，::before表示在A元素内部开始位置添加一个无标签的元素，::after表示在内部结束位置添加一个无标签的元素，通过content指定内容。
需求：class1元素的开始添加内容“HTML”，class1元素的结尾添加内容“CSS"。
.class1::before{
content: 'HTML ';
}
.class1::after{
content: ' CSS';
}
运行效果
实际项目一般不会通过伪元素直接加文字，而是加特殊符号、图标等。
试一试。通配符（星号）选择器是否能匹配到::before与::after元素。
答案：不能。
