CSS选择器与优先级深度解析

一、基础选择器：构建样式的基石

CSS选择器是样式规则的"定位系统"，让我们精准命中目标元素。基础选择器包括：

/* 元素选择器 */
p { color: blue; }  /* 选中所有<p>元素 */

/* 类选择器 */
.warning { background: yellow; }  /* 选中class="warning"的元素 */

/* ID选择器 */
#header { height: 80px; }  /* 选中id="header"的元素 */

/* 通配符选择器 */
* { margin: 0; }  /* 选中所有元素 */

实践建议：

优先使用类选择器，它们复用性强且不会产生ID的高优先级问题
避免过度使用通配符选择器，可能影响页面渲染性能

二、组合选择器：建立元素关系网络

组合选择器通过元素间的关系进行更精确的选择：

/* 后代选择器（空格分隔） */
article p { line-height: 1.6; }  /* 选中article内所有层级的<p> */

/* 子代选择器（>） */
ul > li { list-style: none; }  /* 仅选中直接子元素<li> */

/* 相邻兄弟选择器（+） */
h2 + p { margin-top: 0; }  /* 选中紧接在h2后的第一个<p> */

/* 通用兄弟选择器（~） */
h2 ~ p { color: #666; }  /* 选中h2之后的所有同级<p> */

关系选择器对比：

三、属性选择器：基于属性的精准匹配

属性选择器为元素属性添加匹配条件：

/* 存在属性 */
[disabled] { opacity: 0.5; }  /* 所有带disabled属性的元素 */

/* 精确匹配 */
[type="submit"] { background: #2196F3; }

/* 开头匹配 */
[href^="https"]::after { content: "🔒"; }

/* 包含子串 */
[class*="btn-"] { border-radius: 4px; }

/* 结尾匹配 */
a[href$=".pdf"]::before { content: "📄"; }

实用技巧：

结合表单控件使用：input[type="text"]
匹配特定数据属性：[data-tooltip]

四、伪类与伪元素：超越基础的选择能力

伪类（单冒号）：基于特定状态

/* 交互状态 */
button:hover { transform: scale(1.05); }
input:focus { border-color: blue; }

/* 结构伪类 */
li:nth-child(odd) { background: #f5f5f5; }  /* 奇数行 */
tr:nth-of-type(3n) { /* 每第三行 */ }

/* 表单伪类 */
input:checked + label { font-weight: bold; }

伪元素（双冒号）：创建虚拟内容

/* 内容生成 */
blockquote::before { content: "“"; }
p::first-letter { font-size: 2em; }

/* 装饰元素 */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  /* 其他定位样式 */
}

关键区别：

伪类选择已存在的元素状态
伪元素创建文档树之外的抽象元素

五、优先级计算：样式冲突解决之道

当多条规则作用于同一元素时，优先级决定最终样式：

权重等级（从高到低）：

!important（慎用）
内联样式（style属性）
ID选择器
类/属性/伪类选择器
元素/伪元素选择器
通配符/继承样式

计算规则：

每个ID选择器：+100
每个类/属性/伪类：+10
每个元素/伪元素：+1
内联样式：1000
!important：∞

示例分析：

#nav .item:hover {}  /* 100 + 10 + 10 = 120 */
div#header a.active {}  /* 1 + 100 + 1 + 10 = 112 */

最佳实践：

避免使用!important，会导致维护困难
保持选择器简洁，避免过度嵌套（如.header ul li a）
使用BEM等命名规范替代复杂选择器

六、选择器性能优化

浏览器从右向左解析选择器：

/* 低效：需要检查所有span */
div#sidebar span {}

/* 更优：先定位.active类 */
.active span {}

性能建议：

避免使用通配符作为关键选择器
减少后代选择器的深度
对频繁变化的元素使用类选择器而非属性选择器

掌握选择器与优先级是编写可维护CSS的关键。合理运用这些规则，可以构建出既灵活又高效的样式系统。

CSS选择器与优先级详解：从基础到高级应用