CSS优先级

在CSS官方文档里关于其优先级是这样的:

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

上述表述意思是这样的

  • 如果含有ID选择器,则a=1;
  • 如果含有class选择器,则b=1;
  • 含有标签选择器或伪选择器,则c=1
  • 忽略*选择器

将上述规则应用在选择器中,符合对应条件的就加1,最后将其值依次排在百位十位个位上,哪个值最大,则其对应的样式生效。

官方文档示例:

selector specificity
* a=0 b=0 c=0 -> specificity = 0
LI a=0 b=0 c=1 -> specificity = 1
UL LI a=0 b=0 c=2 -> specificity = 2
UL OL+LI a=0 b=0 c=3 -> specificity = 3
H1 + *[REL=up] a=0 b=1 c=1 -> specificity = 11
UL OL LI.red a=0 b=1 c=3 -> specificity = 13
LI.red.leve a=0 b=2 c=1 -> specificity = 21
x34y a=1 b=0 c=0 -> specificity = 100
s12:not(FOO) a=1 b=0 c=1 -> specificity = 101

举例说明上述规则:

<div id="test">
  <span>Text</span>
</div>

其对应的css:

        div#test span { color: green }  /*#1*/
        div span { color: blue }       /*#2*/
        span { color: red }           /*#3*/

分析如下:

#1. 其specificity=100*1+1+1=102;
#2. 其specificity=1+1=2;
#3. 其specificity=1;

由此可见,#1的权重最大,因此其显示绿色

我们在设置样式的时候尽量使用优先级来确定其样式,当然,我们可以使用 !important 来确定样式,使用!important 则不再遵守优先级规则,其样式会覆盖别的对应的样式,因此我们要尽量减少使用!important ,尤其不要在全站样式或者插件中使用。

当然,我们也可以使用!important 来覆盖上一个!important 选择器,只要书写在其上一条!important下面即可,或者在该选择器中添加一条标签选择器,例如:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

发表评论

电子邮件地址不会被公开。 必填项已用*标注