这次彻底搞定CSS层叠、优先级!
层叠 知识图谱
CSS本质
CSS 本质上就是声明规则,即在各种条件下,我们希望产生特定的效果。浏览器会根据我们书写的规则去决定如何渲染页面。
什么是层叠
层叠指的就是css中的一系列规则。决定了如何解决冲突,是 CSS 语言的基础。
层叠规则
这些规则就是拿来解决冲突的。
(1) 样式表的来源:样式是从哪里来的,包括你的样式和浏览器默认样式等。
(2) 选择器优先级:哪些选择器比另一些选择器更重要。
(3) 源码顺序:样式在样式表里的声明顺序
术语解释
@规则(at-rules)是指用“@”符号开头的语法。比如@import 规则或者@media 查询
样式表的来源
作者样式表
我们自己写的样式表就是作者样式表
用户代理样式表
浏览器有一个默认的样式表,也就是用户代理样式表。
用户样式表
这是第三种来源,它的优先级介于 用户代理样式表和作者样式表之间。用户样式表很少见,并且不受网站作者控制,因此 这里略过
1. 用户代理样式
浏览器先应用用户代理样式后才会应用作者样式表,后者会覆盖前者。
2. !important 声明
标记了!important 的声明会被当作更高优先级的来源,因此总体的优先级按照由高到低
优先级分别是 !important > 作者样式表 > 用户代理样式表
理解优先级
1.行内样式
在HTML 的 style 属性直接写样式,优先级最高,覆盖任何来自样式表或者<style>
标签的样式。
2. 选择器优先级
有3大类选择器。他们有不同的优先级。
如果选择器的 ID 数量更多,则它会胜出(即它更明确)。 如果 ID 数量一致,那么拥有最多类的选择器胜出。 如果以上两次比较都一致,那么拥有最多标签名的选择器胜出。
口诀是遇同级比数量,遇不同级,找高级,全一样,看先后,后者胜。
3. 优先级标记
一个常用的表示优先级的方式是用数值形式来标记,通常用逗号隔开每个数。
“1,2,2” 表示选择器由 1 个 ID、2 个类、2 个标签组成。
有3数和4个数的写法。4个数的写法多了一个数表示代表一个声明是否 是用行内样式添加的。用0,1表示。
源码顺序
如果两个声明的来源和优先级相同,其中一个 声明在样式表中出现较晚,或者位于页面较晚引入的样式表中,则该声明胜出。
a链接属性书写顺序
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
text-decoration: underline;
}
a:active {
color: red;
}
记忆:LV好啊(lvha)
两条经验法则
1.能不用!important就不用。2.在选择器中不要使用 ID
转载自:https://segmentfault.com/a/1190000042242956