css层叠优先级,CSS样式的优先级（层叠）

CSS叫做层叠样式表

Cascading Style Sheets

层叠样式的概念是非常重要的，在最基础的层面上表示了CSS规则的顺序很重要，但是它更加复杂。什么选择器在层叠中胜出取决于三个因素

重要性 importance

专有性 specificity

源代码次序 source order

重要性

CSS中，有一个特殊的语法享有绝对优先级 ! important 把他加载在属性值的后面，可以让这条声明拥有最高优先级。

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black

}

一旦设置了 !important，那么源代码次序即使是在后面，也不会起效果。同时，专有性也不会其效果。

但也并非绝对

如果你合理的利用 源代码次序和重要性这两个特性，

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black ! important

}

(不建议)(不建议)(不建议)(不建议)(不建议)(不建议)

由于大家都是!important 而且按照 源代码次序，那么后来的color一定会把前面的颜色给覆盖掉。

(不建议) (不建议)(不建议)(不建议)

因为大量的事实证明 ！important 本身的出现往往是不得已而为之的情况，也就是说只有到了你不得不使用它(事实证明，极少出现这种情况，往往是因为懒)。

为什么重要性 !important 不建议使用？

因为 !important 很重要的一点是，他改变了另外两条CSS的层叠规则！

一旦使用了绝对权力的 !important ，层叠顺序就会乱了套，在大型项目中往往会出现很多不可预期的错误。

专有性

专有性是基本上衡量选择器具体成都的一种办法 --- 它能够匹配多少元素

不同的选择器对应的优先级完全不同，其中ID选择器是最高的。

选择器

千位

百位

十位

个位

总计值

H1

0

0

0

1

0001

#id

0

1

0

0

0100

h1+p::first-letter

0

0

0

3

0003

li>a[name='demo'] > .inline

0

0

2

2

0022

无选择器，位于style属性中

1

0

0

0

1000

注意 通用选择器(*) 符合选择器(+ > ~ '')以及否定选择伪类(:not) 不会影响优先级。

不过由于他们之后往往都跟随者其它选择器，所以还是要注意。

源代码次序

如果比较了 重要性和专有性 之后，依然没有比较出来谁胜利，那么久按照后来者优先，由 源代码次序来决定获胜。

混合规则

注意！！！ 注意！！！

以上所有的规则均没有优先级之分，也就是说三个规则会同时其效果，层叠样式才是最佳实践。

前面所说的，我们利用 !important来重写后面的规则，其实就是破坏了层叠的顺序(源代码次序凌驾于!important之上)，导致了谁靠后引入，谁就更高优先级。

字符字符字符字符字符字符

p {

color:red ! important;

}

#app {

color:black ! important

}