CSS选择器基础：核心概念与实战技巧

1. CSS选择器基础概念与核心价值

前端开发中，CSS选择器就像精准的手术刀，它决定了样式规则的作用对象。掌握选择器相当于掌握了控制页面样式的第一把钥匙。在实际项目中，我见过太多因为选择器使用不当导致的样式污染、优先级混乱问题，这些问题往往在项目后期才暴露出来，修复成本极高。

CSS选择器本质上是一种模式匹配机制，浏览器通过它来定位DOM元素并应用样式规则。根据W3C标准，CSS选择器可以分为基础选择器和复合选择器两大类。本文将重点解析最常用的5种基础选择器：通用选择器、元素选择器、ID选择器、类选择器和分组选择器，这是每个前端开发者必须内化的基本功。

提示：虽然现代CSS预处理器（如Sass/Less）提供了更强大的选择器嵌套功能，但最终它们都会被编译为标准CSS选择器。理解原生选择器的工作原理是进阶学习的基础。

2. 五大基础选择器深度解析

2.1 通用选择器：星号(*)的妙用

通用选择器用星号(*)表示，它会匹配文档中的所有元素。在性能优化方面，通用选择器常被妖魔化，但合理使用其实能带来意想不到的效果。

css复制* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这段经典代码就是通用选择器的典型应用场景。通过重置所有元素的margin和padding，并统一盒模型计算方式，可以消除浏览器默认样式带来的不一致性。我在多个大型项目中实测发现，这种全局重置相比逐个元素设置，在维护性和渲染性能上都有优势。

但要注意两个使用禁忌：

1. 避免在通用选择器中设置会触发重排(reflow)的属性，如width/height
2. 不要嵌套使用（如.container * *），这会显著增加匹配成本

2.2 元素选择器：最基础的定位方式

元素选择器（也称类型选择器）直接使用HTML标签名作为选择器，例如：

css复制h1 {
  font-size: 2rem;
  color: #333;
}

ul {
  list-style-type: none;
}

这类选择器在项目中有几个典型应用场景：

• 重置默认样式（如去除ul的列表符号）
• 定义基础排版（如统一所有标题的字号阶梯）
• 设置全局元素特性（如a标签的ho