低权重原则——避免滥用子选择器
网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设
CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。
如果忽略了CSS选择符权重，会产生意想不到的小麻烦。
需求与方案
<style type=”text/css”>
#test { font-size: 14px; }
</style>
<p id=”test”>CSS 选择符权重很重要</p>
现在需要将“很重要”三个字设置为红色，我们的做法如下：
方案一，利用子选择器
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span>很重要</span></p>
方案二，新建class
<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span class=”red”>很重要<span></p>
很多工程师推荐使用方案一，因为使用子选择器可以避免新增class，让HTML代码更简洁。这么考虑是有道理的，但如果这时需求有变化，需要添加新的文字进来。
改变需求
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span>很重要</span>， 我们要小心处理</p>
要求将‘小心处理’设置为绿色，我们可能会这样做。
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
.green { color: green; }
</style>
<p id=”test”>
CSS 选择符权重<span>很重要</span>， 我们要<span class=”green”>小心处理<span></p>
本以为‘小心处理’会设置为绿色，但被权重更高的#test span设置为红色。子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期，重写代码如下
<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
#test .green { color: green; }
</style>
<p id=”test”>
CSS 选择符权重<span>很重要</span>， 我们要<span class=”green”>小心处理<span></p>
而如果使用方案二，情况会怎么样呢
<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
.green { color: green; }
</style>
<p id=”test”>CSS 选择符权重<span class=”red”>很重要<span>，我们要<span class=”green”>小心处理<span></p>
因为没有子选择器，所以我们给新添加的代码挂上新的class，就可以顺利地完成样式设置了。
小结
使用子选择器，会增加CSS选择符的权重，CSS选择符权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。所以，除非确定HTML结构非常稳定，不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低。
低权重原则——避免滥用子选择器
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。
如果忽略了CSS选择符权重，会产生意想不到的小麻烦。
需求与方案
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
</style>
<p id=”test”>CSS 选择符权重很重要</p>
现在需要将“很重要”三个字设置为红色，我们的做法如下：
方案一，利用子选择器
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span>很重要</span></p>
方案二，新建class
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span class=”red”>很重要<span></p>
很多工程师推荐使用方案一，因为使用子选择器可以避免新增class，让HTML代码更简洁。这么考虑是有道理的，但如果这时需求有变化，需要添加新的文字进来。
改变需求
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
</style>
<p id=”test”>CSS 选择符权重<span>很重要</span>， 我们要小心处理</p>
要求将‘小心处理’设置为绿色，我们可能会这样做。
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
.green { color: green; }
</style>
<p id=”test”>
CSS 选择符权重<span>很重要</span>， 我们要<span class=”green”>小心处理<span></p>
本以为‘小心处理’会设置为绿色，但被权重更高的#test span设置为红色。子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期，重写代码如下
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
#test span { color: red; }
#test .green { color: green; }
</style>
<p id=”test”>
CSS 选择符权重<span>很重要</span>， 我们要<span class=”green”>小心处理<span></p>
而如果使用方案二，情况会怎么样呢
复制代码
代码如下:<style type=”text/css”>
#test { font-size: 14px; }
.red { color: red; }
.green { color: green; }
</style>
<p id=”test”>CSS 选择符权重<span class=”red”>很重要<span>，我们要<span class=”green”>小心处理<span></p>
因为没有子选择器，所以我们给新添加的代码挂上新的class，就可以顺利地完成样式设置了。
小结
使用子选择器，会增加CSS选择符的权重，CSS选择符权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。所以，除非确定HTML结构非常稳定，不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低。
低权重原则——避免滥用子选择器