CSS 选择器：精确定位 HTML 元素

类选择器

类选择器使用句点字符（.）表示元素的类名称。例如：

.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 选择元素之后插入虚拟元素

优先级

当多个选择器匹配同一元素时，优先级最高的会生效。优先级规则如下：

1. 内联样式
2. ID 选择器
3. 类、属性和伪类选择器
4. 标签选择器

最佳实践

• 使用描述性命名来提高可读性和可维护性。
• 避免使用过多的类或 ID 选择器，因为这可能会降低性能。
• 考虑使用 CSS 库（如 Bootstrap 或 Foundation）来簡化元素定位。
• 适应浏览器的差异性和版本更新，因为选择器支持可能有所不同。