层叠

date
Mar 17, 2023
slug
deepcss-cascade
status
Published
tags
深入解析CSS
summary
css cascade
type
Post
层叠三种条件解决冲突：
  1. 样式表的来源
      2. 样式从哪里来
  1. 选择器优先级
      2. 哪些选择器比另一些选择器更重要
  1. 源码顺序
      2. 样式在样式表里的顺序
规则用法
notion image

样式表来源

​ 添加到网页的样式表并不是浏览器唯一使用的样式表，还有浏览器默认样式（用户代理样式）。用户代理样式优先级低，作者样式表会覆盖它们。
!important声明
​ 在声明的后面、分号的前面加上!important，该声明就会被标记为重要的声明
color:red !important;
​ 标记了!important的声明会被当作更高优先级的来源，因此总体的优先级按照由高到低排列如下：
  1. 作者的!important
  1. 作者
  1. 用户代理

理解优先级

浏览器将优先级分为两部分：HTML的行内样式和选择器样式

行内样式

​ 行内样式属于 “带作用域” 的声明，它会覆盖任何来自样式表或者 <style>标签的样式。
<li>  <a href="#" style="background-color:orange;">链接</a></li>

选择器优先级

优先级的准确规则如下：
  • 如果选择器的 ID 数量更多，则它会胜出
  • 如果 ID 数量一致，那么拥有最多类的选择器胜出
  • 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出
notion image
​ 最明确的选择器是有1个ID的④,因此标题的颜色最终为红色。第二明确的是有2个类的③。如果没有出现带ID选择器的④，则③的声明会生效。
​ 选择器③比选择器②的优先级更高，尽管选择器②更长:2个类比1个类更明确。最后，选择器①最不明确，它有4个元素类型（即标签名），但是没有 ID 或者类。
​ 伪类选择器（ :hover）和属性选择器（ [ type=“input” ] ）与一个类选择器的优先级相同。通用选择器（ * ）和组合选择器（ >、+、~ ）对优先级没有影响。
​ 如果你在CSS里写了一个声明，但是没有生效，一般是因为被更高优先级的规则覆盖了。很多时候开发人员使用ID选择器，却不知道它会创建更高的优先级，之后就很难覆盖它。如果要覆盖一个ID选择器的样式，就必须要用另一个ID选择器。

优先级标记

​ “1，2，2” 表示选择器由 1 个 ID、2 个类、2 个标签组成。优先级最高的是 ID，紧接着是类，最后是标签。
notion image
​ 有时会用4个数的标记，代表一个声明是否使用行内样式添加，会覆盖选择器添加的样式。

源码顺序

​ 如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。

链接样式的源码顺序

a:link{
    color:blue;
    text-decoration:none;
}
a:visited{
    color:purple;
}
a:hover{
    text-decoration:underline;
}
a:active{
    color:red;
}
顺序口诀 “LoVe/HAte”，即link（链接），visited（访问），hover（悬浮），active（激活）

两条经验法则

  1. 在选择器中不要使用 ID
  1. 不要使用 !important

© shallrise 2025