css - 多个类同名？

Question

多个类同名？我知道它有效，但它有效吗？

.color {color:orange;}
.first .color {color:blue;}
.second .color {color:red;}

 

<div class="color">
some text here
</div>

<div class="first">
some <span class="color"> text here</span>
</div>

<div class="second">
some <span class="color"> text here</span>
</div>

Answer 1

这是完全有效的，并且完全可读。请特别注意，声明类的顺序并不重要。CSS 的工作原理是最具体的选择器获胜。

.color {color:orange;}

定义任何具有类颜色的元素都是橙色的。

.first .color {color:blue;}

定义任何具有 class color 的元素是具有 class first的元素的后代的元素是蓝色的

.second .color {color:red;}

定义任何具有类color且是类 second的元素的后代的元素都是红色的

Answer 2

那是一个后代选择器：

.first .color {color:blue;}

将作为具有类的元素color的后代的具有类的元素first。请注意，这与>仅匹配直接子代的子选择器 ( ) 不同。后代选择器匹配任何级别的从父级下降的元素。

来自W3C 文档：

后代组合子 AB

“A B”形式的选择器表示元素“B”，它是某个祖先元素“A”的任意后代。后代组合器是分隔两个简单选择器序列的空格。

Answer 3

它会起作用，但在这种情况下它不是很可读。