CSS特异性如何工作？
我有一些链接的CSS类。 有人可以解释下面的代码是如何工作的？ 它显示文本为绿色。 有人可以解释吗？
<html> <head> <style> .a .c { color: red; } .b .c { color: green; } .c { color: blue; } </style> </head> <body> <div class="a"> <div class="b"> <div class="c"> hi </div> </div> </div> </body> </html> 第一种说法是任何具有class c的项目中的class c的项目都将被标记为红色 。
.a .c { color: red; }
第二种说法是，任何类别为c的任何项目都将被着色为绿色 。 它优先于第一条规则，因为它与第一条规则一样深，但在该规则之后定义 。
.b .c { color: green; }
这就是说任何c类的物品都应该是蓝色的。 但由于它不像上述规则那样具有描述性 ，所以不优先 。 如果您有一个c类项目没有嵌套在a或b类中，则此规则将生效。
.c { color: blue; }
所以有两条规则要记住：
- 更具体的规则获得更高的优先级
- 后来定义的规则获得比他们的特定对象更高的优先级。
一切归结于特异性。
多个CSS规则可能会针对同一个元素，但是更高特异性的规则将会取代所有其他元素。
在你的场景中， .b .c比.c更具体。 因此，前者是“获胜”规则（其具有green的颜色）。
以下是我正在谈论的概念的一个很好的介绍：
http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
这不是链式类，而是更多关于CSS中级联顺序和inheritance的问题。
你必须知道，在层叠样式表中你有一些阅读优先。
你的规则的顺序是非常重要的。
在你的例子中：
.a .c { color: red } .b .c { color: green } .c { color: blue }
<div class="a"> <div class="b"> <div class="c"> text </div> </div> </div>
由于CSS的特殊性，文本显示为绿色。 具有两个类的select器仅覆盖一个select器。 因为它是绿色的，而不是红色的，因为.b .c最后。
您需要知道该顺序对于样式很重要，例如：
.a .c { /* styles*/} // go first .b .c { /* styles*/} // go next
第二种样式重载样式在.c和.b之前的.c（最后一个），但不能重载.c类，因为.c是常见的样式;
C ascading S tyle S heets
如果在它之前有相同的声明，则最后的声明总是优先。
想想像1级就等于1点。
.a = 1分
.b = 1点
.c = 1分
.a .c = 2分
.b .c = 2分
因此，在您的.a .c ＆ .b .c声明中，它们是相同的，并且不仅仅是.c声明。 所以下一个CSS看起来是最后一个东西。 由于.b .c声明在样式表中是最后一个，因此这是浏览器用于样式的一个。
第一个规则设置颜色，然后第二个规则覆盖第一个规则，第二个规则具有相同的特征。 第三条规则不那么具体，所以省略。
