《编写高质量代码》读书笔记系列二低权重规则

于 2012-06-25 19:22:37 发布 · 107 阅读

文章标签：

15 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了CSS中不同选择符的权重，包括HTML标签、class、id及内联样式的具体权重值，并通过实例说明了当样式发生冲突时如何依据权重及就近原则确定最终应用的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS设置的样式是可以层叠的，而且我们的CSS选择符也是有权重的：

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

举例：

1、案例一：

<style type="text/css">
   span{color:red;}
   .test1{color:blue;}
   .test2{color:yellow;}
</style>

<span class="test1 test2">测试数据</span>

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

--------就近原则是选择符定义的顺序先后，不是挂class名的先后顺序