CSS 选择器的优先级是如何计算的？

核心答案

CSS 选择器优先级（Specificity）是浏览器用来决定当多个规则应用到同一个元素时，哪个规则应该生效的机制。优先级通过权重值来计算，权重越高，优先级越高。

优先级计算规则

优先级由四个部分组成，按重要性从高到低：

1. 内联样式（Inline Styles）：权重值 1000

   • 直接在 HTML 元素上使用 style 属性

2. ID 选择器：权重值 100

   • 例如：#header、#nav

3. 类选择器、属性选择器、伪类：权重值 10

   • 类选择器：.container、.btn-primary
   • 属性选择器：[type="text"]、[href^="https"]
   • 伪类：:hover、:focus、:nth-child()

4. 元素选择器、伪元素：权重值 1

   • 元素选择器：div、p、span
   • 伪元素：::before、::after、::first-line

优先级计算示例

/* 权重值：0-1-0-1 = 011 */
div { color: red; }

/* 权重值：0-1-1-0 = 110 */
.container { color: blue; }

/* 权重值：0-1-1-1 = 111 */
div.container { color: green; }

/* 权重值：0-2-0-0 = 200 */
.container .item { color: purple; }

/* 权重值：1-0-0-0 = 1000 */
#header { color: orange; }

/* 权重值：1-0-1-0 = 1100 */
#header .nav { color: pink; }

注意：权重值不是十进制相加，而是按位比较。例如 0-1-1-0（110）的优先级高于 0-0-2-0（020），因为第一位数字更大。

特殊情况

• !important：优先级最高，会覆盖所有其他规则（不推荐过度使用）
• 通配符选择器（*）：权重值为 0
• 组合选择器：权重值相加计算

延伸追问

1. 如何解决样式冲突？

回答：解决样式冲突的常用方法：

1. 提高选择器优先级：使用更具体的选择器（如添加类名或 ID）
2. 使用 !important：强制应用样式（谨慎使用，避免滥用）
3. 调整 CSS 顺序：后定义的规则会覆盖先定义的规则（相同优先级时）
4. 使用 CSS 模块化：通过 CSS Modules、styled-components 等工具实现样式隔离
5. 重构选择器：使用 BEM 等命名规范，避免选择器冲突

2. 为什么有时候修改样式不生效？

回答：常见原因包括：

1. 优先级不够：其他规则优先级更高
2. 缓存问题：浏览器缓存了旧样式，需要强制刷新（Ctrl+F5）
3. 选择器错误：选择器没有选中目标元素
4. 样式被覆盖：后续的样式覆盖了当前样式
5. 浏览器兼容性：某些 CSS 属性在某些浏览器中不支持

3. 如何调试 CSS 优先级问题？

回答：调试方法：

1. 使用浏览器开发者工具：查看元素的 Computed 样式，可以看到哪些规则被应用
2. 查看样式面板：在 DevTools 中可以看到所有匹配的规则及其优先级
3. 使用 specificity calculator：在线工具计算选择器优先级
4. 临时添加 !important：测试是否是优先级问题
5. 检查样式顺序：确认 CSS 文件的加载顺序

4. CSS 选择器性能如何优化？

回答：优化建议：

1. 避免过度嵌套：选择器嵌套层级不超过 3-4 层
2. 避免通用选择器：减少使用 * 通配符
3. 优先使用类选择器：类选择器性能优于属性选择器
4. 避免使用复杂选择器：如 div > ul > li > a
5. 使用 ID 选择器：ID 选择器性能最好（但不利于复用）

（注：文档部分内容可能由 AI 生成）