CSS选择器优先级按四元组(a,b,c,d)计算，a为内联样式、b为ID数、c为类/属性/伪类数、d为元素/伪元素数，逐位比较；避免冗余嵌套和滥用:not()，优先优化HTML语义而非堆砌选择器。
HTML 与 CSS 结合使用时，样式冲突本质是“多个规则争着给同一个元素设样式”，而解决的关键不是堆代码，而是理解并运用 CSS 选择器的优先级规则。它不靠猜、不靠!important硬压，而是靠结构清晰、特异性合理的设计。
HTML 与 CSS 的三种结合方式及其影响
结合方式本身会影响优先级起点：
-
行内样式（
style="..."）：直接写在标签上，权重为 (1,0,0,0)，是单条规则中最高的，但应仅用于临时调试或极少数动态场景；滥用会破坏结构与样式的分离。 -
内部样式（
<style></style>在中）：权重取决于其中选择器的类型，和外部样式表同级，但加载顺序靠前时可能被后加载的外部样式覆盖。 -
外部样式（
<link rel="stylesheet">）：最推荐的方式，利于复用与缓存；优先级完全由选择器特异性 + 源顺序决定，不受引入位置以外的因素干扰。
CSS 选择器优先级怎么算才靠谱
浏览器用一个隐式“四位计分板”(a,b,c,d)比较规则：
-
a = 内联样式：只有
style属性能贡献，值为 1；其他任何选择器都为 0。 -
b = ID 数量：如
#nav #menu算 2 个 ID，权重 (0,2,0,0)；哪怕只多 1 个 ID，就碾压所有类和标签组合。 -
c = 类 / 属性 / 伪类数量：如
.btn.active:hover[type="submit"]共 4 个，权重 (0,0,4,0)。 -
d = 元素 / 伪元素数量：如
div p::before是 (0,0,0,3)；单个p就是 (0,0,0,1)。
比较时从左到右：只要 a 不同，直接定胜负；a 相同再比 b，以此类推。通配符 *、组合符（空格、>、+）、:where() 不加分。
立即学习“前端免费学习笔记（深入）”；
实战中怎么避免和化解样式冲突
冲突常出现在第三方库覆盖自定义样式、全局重置影响局部组件等场景，有效策略不是加 !important，而是提升可控性：
-
用唯一 ID 包装嵌入内容：比如给整个挂载模块加
<div id="my-widget-abc123">，然后所有 CSS 都以它为前缀，如 <code>#my-widget-abc123 .card—— ID 的 b 值直接拉高特异性，轻松压制宿主页面的.card或div.card。 -
采用 BEM 类命名规范：如
form__input--error这类长而明确的类名，既降低与其他项目类名重复概率，又天然形成高 c 值（多个类连写），比单纯input.error更稳。 -
慎用通配符和全局标签重置：像
img { border-radius: 4px; }看似方便，但会让所有图片被迫圆角；改用.content img或.media-img显式控制范围更安全。 -
同特异性时靠源顺序收尾：如果两个规则都是
.btn，后写的生效。所以把项目定制样式表放在框架样式表之后引入，是低成本兜底手段。 - 同一规则中多个 !important 声明，仍按正常优先级比较；
- 它无法跨样式表“越权”覆盖内联样式中的非 !important 声明；
- 大量使用会让调试变成噩梦——你得翻遍所有文件找哪个 !important 覆盖了它。
!important 不是解药，而是信号灯
它强行把某条声明提到最高优先级，但会破坏层叠逻辑：
真正该用 !important 的地方极少：比如组件库中必须锁定的禁用态样式，或 CSS-in-JS 动态注入时的强制覆盖。日常开发中，优先调优选择器结构，而非加感叹号。
