CSS选择器用于匹配HTML文档中的特定元素，从而给这些元素应用对应的样式规则，不同类型的选择器匹配逻辑不同，适用场景也有明显区别。
一、基础选择器
基础选择器是CSS中最简单的选择器类型，也是其他复杂选择器的基础组成部分，常见的有以下几类：
1. 通配选择器
通配选择器使用星号*表示，会匹配页面中所有的元素，通常用来做全局样式初始化。
/* 清除所有元素的内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2. 元素选择器
元素选择器直接使用HTML标签名作为选择器，会匹配页面中所有同类型的标签元素。
/* 所有p标签文字颜色设为灰色 */
p {
color: #666;
font-size: 14px;
}
3. 类选择器
类选择器以英文点号.开头，后面跟类名，匹配所有class属性包含该类名的元素，一个元素可以有多个类名，用空格分隔。
/* 类名为text-red的元素文字设为红色 */
.text-red {
color: #ff0000;
}
/* 同时有text-bold和text-red类的元素文字加粗 */
.text-bold.text-red {
font-weight: 700;
}
4. ID选择器
ID选择器以井号#开头，后面跟ID名，匹配id属性等于该值的元素，同一个页面中ID值应该是唯一的。
/* id为header的元素设置背景色 */
#header {
background-color: #f5f5f5;
height: 60px;
}
二、组合选择器
组合选择器通过多个选择器之间的连接符组合而成，用于更精准地匹配元素之间的层级或位置关系，常见的组合选择器如下：
1. 后代选择器
后代选择器使用空格连接两个选择器，匹配第一个选择器匹配的元素内部所有后代中符合第二个选择器的元素，不管嵌套层级有多深。
/* 匹配div内部所有的p标签，不管p是div的直接子元素还是更深层的后代 */
div p {
line-height: 1.5;
}
2. 子元素选择器
子元素选择器使用大于号>连接两个选择器，只匹配第一个选择器匹配元素的直接子元素中符合第二个选择器的元素。
/* 只匹配ul的直接子元素li，不匹配li内部嵌套的ul里的li */
ul > li {
list-style: none;
margin-bottom: 8px;
}
3. 相邻兄弟选择器
相邻兄弟选择器使用加号+连接两个选择器，匹配第一个选择器匹配元素后面紧邻的、同层级的第二个选择器元素。
/* 匹配h2标签后面紧邻的p标签 */
h2 + p {
margin-top: 0;
color: #333;
}
4. 通用兄弟选择器
通用兄弟选择器使用波浪号~连接两个选择器，匹配第一个选择器匹配元素后面所有同层级的第二个选择器元素。
/* 匹配h2标签后面所有的同层级p标签 */
h2 ~ p {
padding-left: 16px;
}
三、其他常用选择器类型
除了基础选择器和组合选择器，还有两类选择器在实际开发中也经常用到：
属性选择器
属性选择器通过元素的属性来匹配元素，常见写法有[attr]匹配有某个属性的元素，[attr=value]匹配属性值等于指定值的元素等。
/* 匹配所有有disabled属性的input元素 */
input[disabled] {
background-color: #eee;
cursor: not-allowed;
}
/* 匹配type为text的input元素 */
input[type="text"] {
border: 1px solid #ddd;
padding: 4px 8px;
}
伪类与伪元素选择器
伪类选择器用于匹配元素在特定状态下的样式，比如:hover匹配鼠标悬停状态，:nth-child()匹配特定位置的元素。伪元素选择器用于设置元素的指定部分的样式，比如::before在元素前插入内容，::after在元素后插入内容。
/* 鼠标悬停在按钮上时改变背景色 */
button:hover {
background-color: #409eff;
color: #fff;
}
/* 给每个li前面添加小圆点 */
li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #409eff;
margin-right: 8px;
}
四、选择器优先级规则
当多个选择器匹配到同一个元素，并且设置了同个样式属性时，会按照优先级规则决定最终生效的样式：内联样式优先级最高，其次是ID选择器，然后是类选择器、属性选择器、伪类选择器，再然后是元素选择器、伪元素选择器，通配选择器优先级最低。如果优先级相同，后面定义的样式会覆盖前面的样式。
| 选择器类型 | 优先级权重 |
|---|---|
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 元素选择器、伪元素选择器 | 1 |
| 通配选择器 | 0 |