摘要：使用子选择器，会增加选择符的权重，的选择符权重越高，样式越不易被覆盖，所以除非确定结构非常稳定，一定不会再修改了，否则尽量使用子选择器。在进过大量实践后，我并不认为多有太大的坏处，相反，与使用子选择器相比，新添加反而跟利于维护。
CSS设置的样式是可以层叠的，如下面[代码1]
[代码1]
CSS的低权重原则
“CSS的低权重原则”既可以的到“font-size:40px”的样式，又可以得到“color： red”的样式。如果两个不同选择符设置的样式有冲突，又会如何？如下面[代码2]
[代码：CSS层叠有冲突的情况]
CSS的低权重原则
“CSS的低权重原则”颜色会是什么呢？是对“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，所以“CSS的低权重原则”的color应该是red。
但是如果是如下[代码3]时，又会如何呢？
CSS的低权重原则
span的标签同时挂了test和test2两个class，他们的权重都是10，那么“CSS的低权重原则”的color又该是哪个呢？如果 CSS选择符权重相同，那么样式就遵循就近原则，哪个选择符后定义，就采用哪个选择符的样式。[代码3]中test2后定义，所以color会采用“.test2”的设置为green。
如果改变“.test”和“.test2”定义的位置，如[代码4]
CSS的低权重原则
那么 “CSS的低权重原则”的color就为red了。
需要强调的是就近原则指的是选择符 的先后顺序，而不是挂class名的先后顺序，CSS的低权重原则和CSS的低权重原则没有区别。
CSS选择符权重是个容易被忽略的问题。但事实上如果不太注意选择符的权重，常会出现意向不到的小麻烦。例如下面[代码5]
CSS的选择符权重很重要
现在需要将“很重要”三个字设置为红色，我们应该怎么做呢？
方案一，利用子选择器，如[代码6]
CSS的选择符权重很重要
方案二，新建class，如[代码7]
CSS的选择符权重很重要
很多工程师推荐使用方案一，因为使用子选择器可以避免新增class，让HTML代码更简洁，这么考虑是有道理的，但如果这时需求有变化，需要添加新的额文字进来，如[代码8]
CSS的选择符权重很重要，我们要小心处理
要求我们将“小心处理”设置为绿色，我们可以这么做，如[代码9]
CSS的选择符权重很重要，我们要小心处理
本以为小心处理会被选择符font设置为绿色，但它却被选择符权重更高的“#test span”设置成了红色，子选择器在无意中影响到了我们新添加的代码。如果想要达到我们的预期，我们需要按代码[9]重写
CSS的选择符权重很重要，我们要小心处理
而如果使用方案二呢？
CSS的选择符权重很重要，我们要小心处理
因为没有使用子选择器，所以我们添加新代码挂上新的class就可以顺利的完成样式的设置了。
使用子选择器，会增加CSS选择符的权重，CSS的选择符权重越高，样式越不易被覆盖，所以除非确定HTML结构非常稳定，一定不会再修改了，否则尽量使用子选择器。为了保证样式容易被覆盖，提高可维护性，CSS选择符权重尽可能低。
少用子选择器，就需要多添加class，在Web标准盛行的初期，很多工程师认为多添加class是不好的，如果能使用子选择器就应该尽量使用，使用大量的class的做法叫做“多class症”。在进过大量实践后，我并不认为多class有太大的坏处，相反，与使用子选择器相比，新添加class反而跟利于维护。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115196.html
摘要：通用选择器，子选择器和相邻同胞选择器并不在这四个等级中，所以他们的权值都为，优先级最高，万不得已的情况下才用。规范命名风格规范文件命名统一为小写的英文字母尽量少用拼音，如。当名字需要组合时，可以采用文件名的规范。 css样式的权值(权重) 权值等级的定义 第一等：代表内联样式，如: style=，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类...
本文内容： 层叠性 继承性 优先级 权重计算方法（特异性） 首发日期：2018-05-01 层叠性： 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑优先级...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：国内各大公司都已经投入使用，在一些常见的网站，如淘宝腾讯小米等移动站点，随处可见其踪影。变革之腾讯手机淘宝的设计与实现前端乱炖适配总结样式重置上文已提及，这里推荐阅读同学写的专题文章。 前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规...
摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...
阅读 1295·2021-11-04 16:09
阅读 3483·2021-10-19 11:45
阅读 2395·2021-10-11 10:59
阅读 1007·2021-09-23 11:21
阅读 2761·2021-09-22 10:54
阅读 1127·2019-08-30 15:53
阅读 2599·2019-08-30 15:53
阅读 3476·2019-08-30 12:57
