css优化——低权重原则

css设置的样式是可以重叠的，如果两个不同的的选择符对同一个标签的定义产生冲突，就会设计到css选择符的权重问题了。

当不同的选择符样式设置有冲突时，会采用权重高的选择符设置样式。

权重的规则如下：HTML标签的权重是1，class的权重是10，id的权重是100，例如p的权重是1，“div em”的权重是1+1=2，“strong.demo”的权重是1+10=11，“#text.red”的权重是100+10=110.

如果两个的权重相同，那么就会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。

<style type=”text/css”>
span{font-size:40px}
.text{color:red;}
.text2{color:green;}
</style>
<span class=”text text2″>123123123</span>

上述代码中的123123123会以绿色显示，注意这里强调的“就近原则”是基于选择符定义的先后顺序，而不是挂class的先后顺序。挂class的顺序没有区别。

css选择符的权重问题容易被忽视，会带来想不到的小麻烦。例如：

<p id=”test”>css is <span>important<span></p>

方案一：利用子选择器；

#test  span{color:red;}

可以实现important红色，而且不用修改html。

方案二：新建class；

<p id=”test”>css is <span class=”font”>important</span></p>

.font{color:red;}

方案二由于新增了class，很多人不推荐这么做，这么考虑是有道理的，但是如果需求有变化，需要加入新的文字。

<p id=”test”>css is <span>important</span>,<span class=”font2″>you must take care of  it<span>.</p>

并且要求新增字体为绿色。那么按照方案一的思路我们很容易这样去写css：

#test span{color:red;}

.font2{color:green;}

这样本应是绿色的文字会变成绿色吗？不会，因为#test span选择符的权重为100+1=101，高于.font2的权重10，所以后设定的绿色不能覆盖前面的红色。

我们要修改css：

#test span{color:red;}

#test .font2{color:green;}

这样便能实现我们的设计。如果使用方案二呢？我们需要添加一个新的class：

.font{color:red;}

.font2{color:green;}

<p id=”test”>css is <span class=”font”>important</span>,<span class=”font2″>you must take care of  it<span>.</p>

由于方案二没有使用子选择器，所以我们添加新的class就可以很好的完成设计。使用子选择器，会增加css选择符的权重，css权重越高，就越难以被覆盖，所以除非html结构非常稳定，不会再修改，所以尽量不要使用子选择器。

为了保证样式容易被覆盖，提高可维护性，css选择符需保证权重尽可能低。

避免使用子选择器，而添加class与组合的思路差不多，有兴趣的朋友可以查看高质量css一文。