CSS选择器优先级按四元组(a,b,c,d)计算，a为内联样式、b为ID数、c为类/属性/伪类数、d为元素/伪元素数，逐位比较；避免冗余嵌套和滥用:not()，优先优化HTML语义而非堆砌选择器。
CSS 选择器优先级不是靠“数标签个数”或“看谁写在后面”来判断的，而是按一套固定的权重规则计算。写错一个 !important 或多套一层 div 都可能让预期样式失效。
怎么算选择器的 specificity 值
浏览器用四元组 (a, b, c, d) 表示优先级，从左到右权重依次递减：
-
a：内联样式（style="..."）计为 1，否则为 0 -
b：ID 选择器个数（如#header） -
c：类名、属性选择器、伪类个数（如.btn、[type="submit"]、:hover） -
d：元素名和伪元素个数（如div、p::before）
比较时逐位对比，高位相等才看下一位。例如：
.nav ul li a { /* c=1, d=4 → (0,0,1,4) */ }
#main .content p { /* b=1, c=1, d=1 → (0,1,1,1) */ }
后者胜出，因为 b=1 > c=1，无需再比后面的位。
立即学习“前端免费学习笔记（深入）”；
哪些写法会让优先级意外升高
看似无害的写法，实际悄悄抬高了 c 或 d 值：
- 用
div.header代替.header：多加一个d，不必要 - 链式写
.btn.btn-primary.active：三个类名 →c=3，远超单个.btn-primary - 嵌套过深如
article section div ul li a：d=6，极易被更简洁的选择器反超 - 滥用
:not()：里面的内容也参与计分，div:not(.disabled)算作c=1, d=1
解决样式冲突的实操顺序
别一上来就加 !important 或改 ID —— 先按这个顺序排查：
- 检查是否被更高 specificity 的规则覆盖（用浏览器开发者工具看“Computed”面板里哪条被划掉）
- 确认没有拼错类名或属性名（比如把
text-align写成test-align） - 避免用
!important修复，除非是覆盖第三方库且无法修改源码 - 优先提升语义化程度，而不是选择器长度：用
.card-title比.card div h3更可控 - 对动态插入的样式（如 JS 设置
element.style.color），其a=1值天然高于任何外部 CSS
为什么用 CSS-in-JS 或 Shadow DOM 能绕过优先级问题
它们根本不在同一套计算体系里：
- CSS-in-JS（如 styled-components）默认给每个样式生成唯一哈希类名，天然隔离，
c=1就够用 - Shadow DOM 中的样式不会泄露出去，外部 CSS 也无法穿透进来，
specificity只在影子树内部生效 - 但注意：如果在 Shadow DOM 内部又用了复杂嵌套选择器，照样会遇到同样问题
真正难的不是算清楚那串数字，而是克制住“再套一层 div”“再多加个类”的本能 —— 大多数冲突，源头都在结构冗余上。
