类选择器
类选择器使用句点字符（.）表示元素的类名称。例如：
.my-class {
background-color: red;
}这将为所有具有类名“my-class”的元素设置背景颜色为红色。
ID 选择器
ID 选择器使用井号字符（#）表示元素的 ID。例如：
#my-id {
font-size: 20px;
}这将为具有 ID“my-id”的元素设置字体大小为 20 像素。
标签选择器
标签选择器用于选择具有特定标签名的元素。例如：
p {
color: blue;
}这将为所有段落元素（
）设置文本颜色为蓝色。
属性选择器
属性选择器允许开发者基于元素的属性值选择元素。例如：
input[type="text"] {
width: 100px;
}这将为所有具有类型属性值为“text”的输入元素设置宽度为 100 像素。
联合选择器
联合选择器可以组合多个简单选择器以更精确地定位元素。例如：
p.my-class#my-id {
background-color: green;
}这将选择具有类名“my-class”、ID“my-id”并且是段落元素（
）的所有元素，并将其背景颜色设置为绿色。
伪类选择器
伪类选择器用于基于元素的状态或行为选择元素。例如：
- :hover 选择当鼠标悬停在元素上时的元素
- :active 选择当元素被点击或激活时的元素
- :focus 选择具有输入焦点的元素
伪元素选择器
伪元素选择器允许开发者选择不存在于DOM中的元素的特定部分。例如：
- ::before 选择元素之前插入虚拟元素
- ::after 选择元素之后插入虚拟元素
优先级
当多个选择器匹配同一元素时，优先级最高的会生效。优先级规则如下：
- 内联样式
- ID 选择器
- 类、属性和伪类选择器
- 标签选择器
最佳实践
- 使用描述性命名来提高可读性和可维护性。
- 避免使用过多的类或 ID 选择器，因为这可能会降低性能。
- 考虑使用 CSS 库（如 Bootstrap 或 Foundation）来簡化元素定位。
- 适应浏览器的差异性和版本更新，因为选择器支持可能有所不同。
