前端面试专题特攻之CSS权重

作为前端面试经典CSS权重也是必问题目之一,有必要专门找一篇文章来复习一下。
我们通过一个很容易混淆,而且你不一定知道为什么的Demo来复习。
HTML:
你在开发中写了下面这样一个无序列表


<ul id="summer-drinks">
   <li>Whiskey and Ginger Ale</li>
   <li>Wheat Beer</li>
   <li>Mint Julip</li>
</ul>

现在项目经理说客户选中饮料的时候,你要给我搞点特效出来。于是作为前端大神的你首先想到通过添加一个类名来实现。
于是你打开样式表,写了下面的内容


.favorite {
  color: red;
  font-weight: bold;
}

可是结果你发现并没有卵用字体没加粗,也没变红,因为你之前写样式的时候,这样写:


ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

这就是问题的根源,两处选择器都写了color,font-weight属性。于是机智的浏览器会安排冲突进行pk,最终决出冠军。
我猜很多新手可能会很困惑,因为他们对此了解还不是很深,他们可能会想,.favorite出场顺序更靠后,而且更贴近li标签,应该是它获胜才对。
实际上,CSS选择器的权重确实跟出场顺序有关,看下面的Demo:


.favorite {
   color: red;
}
.favorite {
   color: black;
}

favorite将会是黑色的,但这不是我要说的重点。
你应该给每个有意义的元素具体化CSS样式,继续使用上面的例子来说。你最终是要突出一杯最喜欢的饮料。我们可以这样写。


ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

这样就覆盖了上面的代码,但是这除了让你的代码更加难度之外,没有太多好处。还可以使用!important关键字来写。


.favorite {
  color: red !important;
  font-weight: bold !important;
}

使用!important可以大幅地提高CSS权重。当然如果理解不够的话,它可能会被滥用。除非你确定这个选择器无论在什么情况下样式都不会变。否则谨慎使用!
我会在项目中这样用:


.last {
   margin-right: 0 !important;
}

我经常会在列表中,给最后一个元素加上last类名。因为我确定加了last类名的元素,我要让他的右外边距为0,避免与父容器冲突。当然列表中的最后一个元素可能有很多个选择器在竞争,但是有了免死金牌!important,冠军就是它了。

计算CSS权重

知道为什么一开始的color和font-weight为何失效吗?因为使用类名的时候,它的权重低于其他选择器。这里特别提到了class和ID,事实上在浏览器眼里,class和ID有很大区别,无论你写了多少个类名,它的权重都抵不过私生子ID。
一起来看看下面这张图:
计算CSS权重
注解:
每一个元素都有行内样式(写在attr里面的style)它的权重是(1,0,0,0)
每一个ID的权重值为(0,1,0,0)
每一个类名的权重值为(0,0,1,0)
每一个元素选择器的权重值为(0,0,0,1)
你可以把权重值看成一个数字,比如1,0,0,0你可以当成1000来比较大小,但是,权重值并不是一个10进制数,比如某个元素的权重值可以为0,1,13,4但是13不会像10进制那样向前加1!

计算CSS权重案例

计算CSS权重案例
计算CSS权重案例
计算CSS权重案例
注意::not()伪类选择器并没有增加权重,而是括号里面的元素增加了权重。

计算CSS权重案例
计算CSS权重案例

CSS权重总结:

  1. 通配符的权重值为(0,0,0,0)
  2. 伪元素选择器(::first-line)的权重值为(0,0,0,1)而伪类的权重值为(0,0,1,0)
  3. 伪类not:()没有给它本身增加权重,而是给括号里的元素增加权重。
  4. !important属性是最大的,它只能被同样拥有!important的选择器覆盖。你可以把它的权重值理解为(1,0,0,0,0)

本文转自:http://w3ctrain.com/2015/07/25/specifics-on-css-specificity/

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/150.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部