浅谈CSS优先级

作者:日期:2017-04-14 22:58:38 点击:118

 

了解一下CSS优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

最近在写一些小demo,过程中遇见由于不太熟悉CSS优先级问题而造成的麻烦,所以特地了解和学习了相关的知识,为了避免遗忘,也有助于将来复习,所以记在博客里。

什么是CSS权重

优先级就是分配给指定CSS的权重。有时候当我们辛辛苦苦写完HTML和CSS代码之后,可能会发现实际效果与我们所期待的结果并不完全一样,而我们的CSS样式添加又是正确的,那这时候就要注意可能是CSS权重的问题!让我们先来看看代码

一个简单的div盒子里装着三个div

<div id="box">
<div class="box1">box1</div>
<div>box2</div>
<div>box3</div>
</div>

然后给他们加样式

#box {
width: 200px;
height: 200px;
background: red;
}

/*最外面div盒子设置宽高和背景为红色 */
#box div {
width: 50px;
height: 50px;
background: #ccc;
}

/*将子代div背景色设置为#ccc */
.box1 {
background: green;
}

/* 将box1背景色设置为绿色*/

按照我们上面代码的布置,最后的结果应该是三个子盒子的背景色,box1为绿色,其余两者为#ccc,然而最后的结果却不是这样。而造成这样的原因就是CSS的权重。

那权重到底是什么东西呢?我的理解是,每个选择器都有它的权重,而不同的选择器,它的权重可能是不一样的,而权重大的样式就会覆盖权重小的。

计算权重

大家都知道,CSS的选择器有ID选择器,类选择器,等等。这里我们将其分成四大类,每大类的权重相等。

  • 行内样式,html 文档中定义的 style,不包含选择器,直接对元素起作用。
  • ID 选择器
  • 类(class),属性选择器(attribute selector)和伪类选择器(pseudo-class-selector)
  • 元素和伪元素(pseudo-elements)

这样分类完毕之后,我们可以将每大类的权重大小设置为a,b,c,d

  • 如果有行内样式,代表其中的样式内容将直接对HTML起作用,那么初始值a=1
  • 如果使用ID选择器,ID选择器个数为x,那么b=x
  • 使用类或者属性选择器和伪类选择器总数为y,那么c=y
  • 使用元素和伪元素个数为z,那么d=z
  • 所以可以简单的记权重为(0|1,x,y,z) ,把它看作一个 4 位数的数字,数字越大权重越高。可以这么记:从 0 开始,一个行内样式 +1000,一个 id+100,一个属性选择器 /class 或者伪类 +10,一个元素名,或者伪元素 +1. 比如:
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<head>
<style type="text/css">
#x97z {color: red}
</style>
</head>
<body>
<P id="x97z" style="color: green">
</body>

有几点要注意的是:

  1. 通配符*不具有特殊性,它的权重值为(0,0,0,0)
  2. !important 的权重大于任何没有!important的样式,所以一定要慎用!important

上一篇: 前端性能优化小总结

下一篇: 利用CSS实现无js的tab切换