Skip to content

CSS 笔记 - CSS 层叠

什么是 CSS 层叠

CSS层叠(Cascading)是指多个 CSS 规则应用于同一个 HTML 元素时,这些规则的应用顺序和优先级。在 CSS 中,如果多个规则作用于同一个元素并且产生冲突时,浏览器会根据一定的规则来确定哪个规则将被应用到元素上

CSS 层叠规则

层叠规则机制

  1. 样式表的来源:样式是从哪里来,包括自定义的样式和浏览器默认样式
  2. 选择器优先级:哪些选择器优先级更高
  3. 源码顺序:样式在样式表里的声明顺序

具体规则如下

优先级:

根据规则的特定性(Specificity)来确定优先级。通常情况下

  1. ID选择器 > 类选择器 > 元素选择器
  2. 内联样式 > 内部样式表 > 外部样式表

示例:

可以通过样式检测器进行验证样式应用的优先级(样式检测器中选择器会按照优先级顺序排列)

img

重要性:

通过 !important 关键字设置的样式具有最高的优先级,它会覆盖其他所有样式

!important 标识的样式优先级会提高,当有多个同样的 !important 时,依然需要处理优先级

源码顺序:

后定义的样式会覆盖先定义的样式

当一个元素同时处于两个或者更多状态时,最后一个状态就会覆盖其他的状态

例如:

下面这个示例,当鼠标悬停并激活链接时,显示为 hover 中的字体颜色

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a:link {
        color: blue;
        text-decoration: none;
      }
      a:active {
        color: red;
      }
      a:hover {
        text-decoration: underline;
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="https://www.google.com">你好,我是 a 标签</a>
    </div>
  </body>
</html>

css 顺序: link - active - hover

css
a:link {
    color: blue;
    text-decoration: none;
}
a:active {
    color: red;
}
a:hover {
    text-decoration: underline;
    color: green;
}

当顺序切换为下面时,才是符合预期的:

css 顺序 link - hover - active

css
a:link {
    color: blue;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: green;
}
a:active {
    color: red;
}

这个正确的顺序应该是: link、 hover、 active(其实也很好记,跟正常的操作顺序一致, 当我们点击按钮时,必然 link 和 hover已经触发了,此时我们需要显示的应该更优先展示 active的样式,那么它应该放在这三个状态的最后,以避免被 link 和 hover 状态所覆盖)

CSS 层叠经验

  1. 在选择器中尽量不要使用 ID,当有需要覆盖该属性时,通常需要花费更多的代价。
  2. 尽量不要使用 !important ,因为他依旧有优先级问题

Released under the MIT License.