Appearance
CSS 笔记 - CSS 层叠
什么是 CSS 层叠
CSS
层叠(Cascading)是指多个 CSS
规则应用于同一个 HTML
元素时,这些规则的应用顺序和优先级。在 CSS
中,如果多个规则作用于同一个元素并且产生冲突时,浏览器会根据一定的规则来确定哪个规则将被应用到元素上
CSS 层叠规则
层叠规则机制
- 样式表的来源:样式是从哪里来,包括自定义的样式和浏览器默认样式
- 选择器优先级:哪些选择器优先级更高
- 源码顺序:样式在样式表里的声明顺序
具体规则如下
优先级:
根据规则的特定性(Specificity
)来确定优先级。通常情况下
ID
选择器 > 类选择器 > 元素选择器- 内联样式 > 内部样式表 > 外部样式表
示例:
可以通过样式检测器进行验证样式应用的优先级(样式检测器中选择器会按照优先级顺序排列)
重要性:
通过 !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 层叠经验
- 在选择器中尽量不要使用
ID
,当有需要覆盖该属性时,通常需要花费更多的代价。 - 尽量不要使用
!important
,因为他依旧有优先级问题