Firefox开发者工具Inspector面板CSS规则生效逻辑咨询

核心逻辑：CSS层叠与优先级的实际生效 #

你碰到的是CSS层叠机制的典型场景，拆解清楚就明白：

• 划掉的规则：这条规则确实存在，但已经被其他优先级更高、或者加载顺序更靠后的规则覆盖了，所以当前元素渲染时不会用它的属性值，但它并没有从样式表中消失。
• 正常显示的规则：这条规则和你关注的生效规则存在层叠关联——要么是控制同一个属性但没覆盖目标规则，要么是通过继承、属性组合影响着目标规则的生效环境。
• 生效的目标规则：它能生效，本质是另外两条规则在层叠链里起到了"压制其他隐性规则"的作用：那条划掉的规则原本是用来覆盖目标规则的，但它被正常显示的规则反覆盖了，所以目标规则得以保留；当你同时取消这两条规则，原本被它们压制的更高优先级规则（比如浏览器默认样式、框架全局样式）就会生效，直接覆盖你的目标规则，导致它失效。

快速验证思路 #

• 在Inspector的规则面板里，看每条规则右侧的( specificity: x,x,x )，权重数值越高，优先级越高，越容易覆盖其他规则。
• 切换到「计算样式」面板，能直接看到元素最终生效的每个属性来自哪条规则，以及哪些规则被覆盖了。

内容的提问来源于stack exchange，提问作者OverLordGoldDragon