前端面试题:CSS中的选择器权重

CSS中选择器优先级的权重计算

先看一段代码,如下:

  <style>
    a{
      color: red;
    }
    #box a{
      color: green;
    }
    [class="box"] a{
      color: gold;
    }
    .box a{
      color: brown;
    }
    p a{
      color: yellow;
    }
  </style>
  <p id='box' class="box"> <a>hello</a></p>

请问上面代码中,a标签中文字的最终颜色是什么?知道CSS选择器优先级规则的童鞋都知道,在CSS中优先级顺序如下:

ID选择器 > class选择器 > tag选择器
所以,上面代码的颜色,大家都会选择 #box a{ color: green;} 绿色。这个答案没错。 如果我们把这一条规则从style标签中移除呢,那么a标签文字的颜色应该是哪个? brown? or gold? Which one?

答案是: brown

a{color:red}p a {color : yellow;}的优先级肯定没有其它两项高,不需要考虑。在 [class="box"] a.box a中,后者的顺序比较考后,会覆盖之前的样式,所以颜色是brown

这也许会是一些人的答案,不能不说不对。那么如果这中情况下呢?

  <style>
    #box{
      color: green;
    }
  </style>
  <p id='box' class="box" style="color: red;"> hello </p>

不用说,大家都知道会使用style="color: red;"属性定义的颜色,是red

那么,css所遵从的具体规则是什么呢?

权重计算规则

  1. 第零等:!important, 大过了其它任何设置。
  2. 第一等:代表内联样式,如: style=””,权值为1000。
  3. 第二等:代表ID选择器,如:#content,权值为0100。
  4. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  5. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  6. 第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  7. 第六等:继承的样式没有权值。

计算规则

!important 和内联样式style都属于不讲理的那种,

  • 只要存在 !important!important便具有最高优先级;
  • 如果不存在 !important,存在style,那么style便具有最高优先级;
  • 剩下的 “ID” 、 “类,伪类和属性” 、 “元素类型和伪元素“ 分别对应 权重值(0-a-b-c)中的 a/b/c;计算方法如下:
*               /* a=0 b=0 c=0 -> specificity = 0-0-0-0 */
LI              /* a=0 b=0 c=1 -> specificity = 0-0-0-1 */
UL LI           /* a=0 b=0 c=2 -> specificity = 0-0-0-2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity = 0-0-0-3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity = 0-0-1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity = 0-0-1-3 */
LI.red.level    /* a=0 b=2 c=1 -> specificity = 0-0-2-1 */
#x34y           /* a=1 b=0 c=0 -> specificity = 0-1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 0-1-0-1 */
  • 继承的样式没有权值,比其它任何类型的权值都低。

在这里插入图片描述

【参考资料】

CSS selector specificity

阅读更多
换一批

没有更多推荐了,返回首页