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选择符需要保证权重尽可能低。
低权重原则——避免滥用子选择器
标签:
低权重,子选择器
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“低权重原则——避免滥用子选择器”评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]