低权重原则——避免滥用子选择器

低权重原则——避免滥用子选择器

 

    CSS设置的样式是可以层叠的，如代码清单1所示。

 

    代码清单1    CSS的层叠

<style type="text/CSS">
span{font-size:40px}
.test{color:red}
</style>
<span class="test">1234567890</span>

 

    “1234567890”既可以得到“font-size:40px”的样式，又可以得到“color:red"的样式。如果两个不同选择符设置的样式有冲突，又会如何呢？如代码清单2所示。

 

 

    代码清单2    CSS层叠有冲突的情况

<style type="text/CSS">
span{font-size:40px;color:green}
.test{color:red}
</style>
<span class-"test">1234567890</span>

 

    “1234567890”的颜色会是什么呢？是对“span”设置的“color:green”呢，还是对“.test”设置的“color:red”呢？这就涉及CSS选择符的权重问题了。

 

 

    CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。权重的规则是这样的：HTML标签的权重是1，class的权重是10，id的权重是100，例如p的权重是1，“div em”的权重是1+1=2，"strong.demo”的权重是10+1=11，"#test.red”的权重是100+10=110。

 

 

    代码清单2中，选择符span的权重是1，“.test”的权重是10，所以“1234567890”的color应该是green。但如果如代码清单3，又会如何呢？

 

 

    代码清单3      选择符权重相同的情况

<style type="text/CSS">
span{font-size:40px}
.test{color:red}
.test2{color:green}
</style>
<span class-"test test2">1234567890</span>

 

 

 

    span标签同时挂了“test”和“test2”两个class，它们的权重都是10，那么“1234567890”的color又该是哪个昵？如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。代码清单3中，“.test2”定义晚于“.test”，所以“1234567890”的color会采用“.test2”的设置，值为green。

 

    如果改变“.test”和“.test2”定义的位置，如代码清单4。

 

 

    代码清单4    调换样式的位置

<style type="text/CSS">
span{font-size:40px}
.test2{color:green}
.test{color:red}
</style>
<span class="test test2">1234567890</span>

 

    那么“1234567890”的color就为red了。

 

 

     需要强调的是“就近原则”指的是选择符定义的先后顺序，而不是挂class名的先后顺序，<span class="test test2">和<span class="test2 test">没有区别。

 

    CSS选择符权重是个容易被忽视的问题，但事实上如果不太注意选择符权重，常会出现意想不到的小麻烦。例如有段代码如代码清单5所示。

 

 

   代码清单5      需标红的代码 

<style type="text/CSS">

#test{font-size:14px;}
</style>

<p id="test">CSS选择符权重很重要</p>

 

 

 

现在需要将“很重要”三个字设置为红色，我们应该怎么做呢？

 

 

方案一，利用子选择器，如代码清单6所示。

 

   代码清单6     用子选择器

<style type="text/CSS">
#test{font-size:14px;}
#test span{color:red;}
</style>
<p id="test">CSS选择符权重<span>很重要</span></p>

 

 

 

方案二，新建class，如代码清单7所示。

 

    代码清单7     新建class

<style type="text/CSS">
#test{font-size:14px;}
.font{color:red;}
</style>
<p id="test">CSS选择符权重
  <span class="font">很重要</span>
</p>

 

 

 

    很多工程师推荐使用方案一，因为使用了选择器可以避免新增class，让HTML代码更简洁。这么考虑是有道理的，但如果这时需求有变化，需要添加新的文字进来，如代码清单8所示。

 

 

    代码清单8     添加新的文本 

<style type="text/CSS">
#test{font-size:14px;}
#test span{color:red;}
</style>
<p id="test">CSS选择符权重
  <span>很重要</span>，我们要小心处理
</p>

 

 

    要求我们将“小心处理”这几个字设置为绿色，我们可以这么做，如代码清单9所示。

    代码清单9   需标绿的代码

<style type="text/CSS">
    #test{font-size:14px;)
    #test span{color:red;)
    .font{color:green;}
</style>
<p id="test">CSS选择符权重
   <span>很重要</span>，我们要<span class="font">小心处理</span>
</p>

 

      本以为“小心处理”会被选择符“.font”设置为绿色，但它却被选择符权重更高的“#test span”设置成了红色，子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期，我们需要按代码清单10重写代码。

 

 

    代码清单10     被迫加重权重的选择器

<style type="text/CSS">
#test{font-size:14px;}
#test span{color:red;}    /*选择符权重为100+1=101*/
#test .font{color:green;}    /*选择符权重为100+10=110*/
</style>
<p id="test">CSS选择符权重<span>很重要</span>，我们要<span class="font">小心处理</span></p>

而如果使用方案二，情况又会如何呢？如代码清单11所示。

 

    代码清单11      新增class作为标绿容器的选择符

<style type="text/CSS">
#test{font-size:14px;}
.font{color:red;}
.font2{color:green;}
</style>
<p id="test">CSS选择符权重
 <span class="font">很重要</span>，我们要<span class="font2">小心处理</span>
</p>

    因为没有使用了选择器，所以我们给新添的代码挂上新的class，就可以顺利地完成样式设置了。

 

    使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式越不易被覆盖，越容易对其他选择符产生影响。所以，除非确定HTML结构非常稳定，一定不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

      少使用子选择器，就需要多添加class，在Web标准盛行的初期，很多工程师认为多添加class是不好的，如果能使用子选择器就应尽量使用，使用大量class的做法叫做“多class症”。在经过大量实践后，我并不认为多class有太大坏处，相反，与使用子选择器相比，新添class反而更利于维护。