CSS 选择器是 CSS 规则的一部分，它用于选择并匹配 HTML 文档中的元素，以便将样式应用到这些元素上。CSS 选择器的多样性和强大性使得前端开发者可以精确控制页面的布局和视觉效果。以下是 CSS 选择器的主要形式：
基本选择器
1. 通用选择器（Universal Selector）
星号（*）作为通用选择器，匹配文档中的所有元素。
* {
margin: 0;
padding: 0;
}
2. 元素/类型选择器（Type Selector）
直接使用元素名称进行选择。
p {
color: blue;
}
3. 类选择器（Class Selector）
使用点（.）加类名进行选择。
.example {
font-weight: bold;
}
4. ID选择器（ID Selector）
使用井号（#）加ID名进行选择。
#header {
background-color: #333;
}
组合选择器
1. 分组选择器（Group Selector）
使用逗号（,）将不同的选择器组合在一起，共享相同的声明。
h1, h2, h3 {
text-align: center;
}
2. 后代选择器（Descendant Selector）
使用空格分隔两个选择器，匹配任何符合条件的后代元素。
div p {
color: red;
}
3. 子选择器（Child Selector）
使用大于号（>）分隔两个选择器，匹配符合条件的直接子元素。
ul > li {
list-style-type: none;
}
4. 相邻同胞选择器（Adjacent Sibling Selector）
使用加号（+）分隔两个选择器，匹配位于第一个选择器元素后的相邻第二个选择器元素。
h1 + p {
margin-top: 0;
}
5. 通用同胞选择器（General Sibling Selector）
使用波浪号（~）分隔两个选择器，匹配位于第一个选择器元素后的所有第二个选择器元素。
h1 ~ p {
font-size: 14px;
}
属性选择器
1. 存在属性选择器
方括号（[]）内包含属性名，匹配包含给定属性的元素。
[title] {
cursor: help;
}
2. 属性值选择器
方括号内包含属性名等号及值，匹配属性值完全匹配的元素。
[type="text"] {
border: 1px solid #000;
}
伪类和伪元素选择器
1. 伪类选择器
使用冒号（:）加伪类名称进行选择，如`:hover`。
a:hover {
color: red;
}
2. 伪元素选择器
使用两个冒号（::）加伪元素名称进行选择，如`::before`。
p::first-line {
font-weight: bold;
}
分级选择器
1. 复合选择器（Complex Selector）
结合多种选择器形式以获得更复杂的选择逻辑。
div.example p {
color: green;
}
2. 优先级和重要性
使用`!important`提高特定声明的优先级。
p {
color: blue !important;
}
了解并掌握这些不同的CSS选择器，能够帮助你更加灵活地控制网页的样式，实现丰富多样的设计效果。在实际开发中，合理使用选择器不仅可以提高代码的可读性和可维护性，还可以提高性能，避免不必要的重绘和重排。