CSS(Cascading Style Sheets)翻译成中文叫层叠样式表.
Cascading的意思就是层叠的意思
自然的, 层叠性是CSS非常重要的一个特性.
也有人把层叠性理解为选择器的优先级. 就那么回事吧
那什么叫层叠性呢?
一. 什么是层叠性
先看下面一段代码:
<style>
#p1{
color: red;
}
p{
color: blue;
}
.text{
color: green;
}
</style>
<p class="text" id="p1">
我是红色还是蓝色还是绿色呢的呢?
</p>
3 个选择器同时都选中了<p>标签, 那么到底是哪个会最终生效呢呢?
最终发现id选择器最终生效.
当多个选择器选中同一个元素的时候, 到底哪个最终生效, 是由CSS的层叠机制来控制的.
这就是CSS的层叠性.
二. CSS层叠规则
CSS共有完整的 3 条层叠规则.
2.1 专有性(Specificity)
专有性基本的思路就是查找简单选择器(标签, id, 类)的个数, 得到一个分数, 根据分数的大小来得到谁最后最终胜出.
我们把最终的分数用一个四位数来表示: 千, 百, 十, 个
千位：如果声明是在
style属性中(行内样式)该列加 1 分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。百位：在整个选择器中每包含一个
ID选择器就在该列中加 1 分。(特别指明一个id, 专有性应该高)十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加 1 分。(类和属性的专有性肯定
id肯定要低点)个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加 1 分。(元素的专有性最低)
注意:
通用选择器
(*), 复合选择器(+, >, ~, ' ')和否定伪类(:not)在专用性中无影响。(不参与计算分数)如果某一项的个数超过 9, 则不要进位. (其实大于255的时候才会进位. 然后实际绝对不会出现255的, 没有实战意义)
由于行内属性直接添加到了千位, 所以可以理解为, 行内属性优先级很高.
需要讲解多个案例
2.2 源代码次序(Source order)
如果选择器具有相同的专有性分数, 则要看源代码的次序.
后面的规则将战胜先前的规则
2.3 重要性(!important)
其实这条规则是应该是第一条规则.
重要性是指你的属性是否添加了 !important.
添加了!important的属性的最厉害.
color: blue !important;
三. 层叠性总结
重要性
专有性
源代码次序
先看重要性, 有!important的比较厉害
重要性一样(都有!important或者都没有),再看专有性, 谁分数高谁厉害
分数一样的时候, 看源代码次序. 谁在后面谁厉害.
继承的属性呢? 继承的属性根本不配参与比较.