层叠与优先级介绍

层叠层叠是 CSS 的核心机制用于解决同一元素同一属性被多个样式声明设置时的冲突问题。浏览器按照严格的优先级规则从低到高逐层比较最终确定哪个声明生效。术语解释名次解释有三种层叠来源类型用户代理样式表、用户样式表和作者样式表用户代理指的是浏览器用户指的是是网站访问者作者指的是你开发者来源用户代理样式1、打开浏览器面板查看2、谷歌源码用户样式注意Chrome 在 2014 年后已移除原生用户样式表支持替代方案使用扩展推荐扩展Stylus 或 StylishStylus安装设置样式结果层叠顺序(由低到高来源说明user-agent normal styles用户代理普通样式浏览器默认样式表user normal styles用户普通样式用户自定义样式表如浏览器插件设置author normal styles作者普通样式网页开发者编写的样式内部再细分styles being animated正在动画的样式CSS Animation 的当前帧值覆盖普通样式但低于 !importantauthor important styles作者重要样式开发者标记 !important 的样式user important styles用户重要样式用户标记 !important 的样式覆盖作者 !important保障用户特殊需求无障碍访问user-agent important styles用户代理重要样式浏览器标记 !important 的样式styles being transitione正在过渡的样式最高优先级CSS Transition 的插值中间值确保视觉过渡平滑完成优先级Specificity选择器权重的计算当来源相同才会计算选择器权重。权重四位数规则A - B - C - D权重采用4 个等级计分左侧数字权重远大于右侧100 个 class 干不过 1 个 id。位权代号选择器类型分值最高A内联样式style...1000高BID 选择器#header100中C类 / 属性 / 伪类.btn [typetext] :hover :nth-child10低D元素 / 伪元素div ::before ::after1无视-通配符 / 关系符* ~ 0层叠核心公式层叠 来源重要性 → 优先级 → 声明顺序先看来源过渡 !important 动画 普通样式选择器特异性内联 (1000) id (100) 类 / 伪类 (10) 元素 (1)源码顺序后面写的覆盖前面写的层叠层layer普通规则后层 前层!important规则前层 后层简单来说原则说明作者优先普通开发者样式覆盖浏览器默认用户至上重要用户!important覆盖作者保障无障碍动画覆盖普通animation可以动态改变样式过渡覆盖一切transition必须最终生效确保视觉完整更简单来说important 内联 ID 类/伪类/属性 元素/伪元素代码示例作者重要样式与用户代理重要样式对比!DOCTYPE html html head style input[typehidden i] { display: block !important; } /style /head body input typehidden /body /html效果如下图虽然用户代理样式表显示中划线但是最终还是生效作者重要样式与用户重要样式对比通过浏览器插件设置用户重要样式代码设置黄色覆盖不了用户重要样式链接地址谷歌圆满-用户代理样式https://gist.github.com/ambidexterich/34828a904dd97dd2a345W3C-层叠https://www.w3.org/TR/css-cascade-5/#inheritanceMDN