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

cppprimer 发布于2019-08-29 17:10 / 2188人阅读

摘要：第二等代表选择器，如，权值为。第三等代表类，伪类和属性选择器，如，权值为。第五等通配符子选择器相邻选择器等的。第六等继承的样式没有权值。

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

先看一段代码，如下：

请问上面代码中，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。

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

hello

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

那么，css所遵从的具体规则是什么呢？

权重计算规则

第零等：!important，大过了其它任何设置。

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

第六等：继承的样式没有权值。

计算规则

!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

GPU云服务器云服务器 css选择器基础选择器css 面试题栈面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114144.html

前端面试题-CSS优先级

摘要：优先级是基于不同种类选择器组成的匹配规则。但是，在内部声明的选择器是会影响优先级。当两条相互冲突的带有规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。扩展阅读前端面试题选择器一、选择器优先级浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。二、优先级计算优先级就是分配给指定的CSS声明...

余学文 2019-08-30 14:09 评论0 收藏0
前端面试题-CSS优先级

摘要：优先级是基于不同种类选择器组成的匹配规则。但是，在内部声明的选择器是会影响优先级。当两条相互冲突的带有规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。扩展阅读前端面试题选择器一、选择器优先级浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。二、优先级计算优先级就是分配给指定的CSS声明...

zorro 2019-08-01 18:41 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

suemi 2019-08-22 16:05 评论0 收藏0
前端开发面试题

摘要：总结了一些优质的前端面试题多数源于网络，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。如果需要使用，最好是通过动态给添加属性值，这样可以可以绕开以上两个问题。 markyun 总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ sho...

roland_reed 2019-08-28 17:51 评论0 收藏0