选择器优先级不生效怎么办_分析层叠顺序和来源权重
2026-05-03 17:33:28
0浏览
收藏
哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《选择器优先级不生效怎么办_分析层叠顺序和来源权重》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！
样式被划掉是因为 specificity 权重低于其他规则，需对比权重值（如 0,1,1,0）；CSS 层叠还受来源顺序影响，后加载样式优先；提权应优先用精准选择器而非 !important；继承属性不参与优先级计算，需在 Computed 面板确认是否真被应用。
样式被划掉？先看开发者工具里的 specificity 数值
样式“不生效”绝大多数时候不是写错了，而是被更高优先级的规则覆盖了——浏览器在 Styles 面板里用横线划掉你的声明，鼠标悬停会提示 specificity is lower than another rule。这时候别改属性值，先点开那条被划掉的样式，看它右边显示的权重（比如 0,1,1,0 或 110），再对比覆盖它的那条规则的权重。
- ID 选择器（如
#header）算 100，类/伪类/属性选择器（如.btn、:hover、[disabled]）各算 10，元素（如div、p）各算 1 - 嵌套层数本身不加权，但长链如
.container .list .item a累计了 3 个类 + 1 个元素 = 31，很容易压过你后来写的.item-link（仅 10） - 行内样式
style="margin: 20px"权重是 1000，几乎无法被外部 CSS 覆盖（除非加!important）
为什么改了 .class 还是没用？检查样式来源顺序和加载位置
CSS 的层叠（cascade）不仅看选择器权重，还严格按「来源 + 顺序」裁决：内联 > ID > 类 > 元素；同权重时，后定义的赢。但很多人忽略的是，样式来源本身就有天然排序：
- 外部样式表（
）优先级低于内部样式（
