CSS 选择器完全解析：从入门到精准控制样式
CSS 选择器是前端开发的基础工具，它决定了哪些 HTML 元素会被应用特定的样式规则。理解选择器的种类、优先级和组合方式，能让你写出更简洁、可维护且性能优良的样式代码。本文将从最常用的基础选择器开始，逐步深入到伪类、组合器与权重计算，通过实例帮你彻底掌握 CSS 选择器的使用。
一、选择器的作用与分类
选择器本质上是一种“匹配模式”，浏览器根据它找出文档中符合条件的一个或多个元素，然后应用大括号内的样式声明。按照复杂程度，我们可以将其分为：
基础选择器：元素、类、ID、通配符
属性选择器：根据元素的属性及属性值进行匹配
组合选择器：描述多个选择器之间的层级关系
伪类选择器：针对元素的特殊状态（如悬浮、被选中）
伪元素选择器：选取元素的特定部分（如首字母、前面/后面的虚拟元素）
二、基础选择器：精准度从低到高
1. 元素选择器（Type Selector）
直接使用 HTML 标签名作为选择器，匹配页面上所有该标签。
p { color: #333; line-height: 1.5; }优点：快速重置全局样式。
缺点：范围太广，通常需要与更具体的选择器配合。
2. 类选择器（Class Selector）
以点 . 开头，匹配所有具有该类名的元素。最常用、推荐程度最高。
css
.card { border: 1px solid #eee; border-radius: 8px; }一个元素可以拥有多个类（如
class="card highlight"），样式会合并。类名可重用，降低代码冗余。
3. ID 选择器（ID Selector）
以井号 # 开头，匹配拥有该唯一 id 值的元素。每个页面的 ID 应当唯一。
css
#header { background: #2c3e50; height: 60px; }优先级很高（见后文权重表），过度使用会导致样式难以覆盖，一般用于特定布局或 JavaScript 钩子。
4. 通配符选择器（Universal Selector）
* 匹配所有元素（包括 <html>, <body> 及其内部全部标签）。
* { margin: 0; padding: 0; box-sizing: border-box; }常用于重置默认边距，但会带来性能开销（大型页面慎用），可改用更具体的 reset 方案。
三、属性选择器：按特征筛选
利用元素自带的属性及其