多个类同名？ [复制]答案

【问题标题】：Multiple classes with the same name? [duplicate]多个类同名？ [复制]
【发布时间】：2013-02-21 13:13:36
【问题描述】：

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

.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>

【问题讨论】：

那些不是多个类。这是许多元素都有的一类。当然它是有效的。
W3C Validator 会告诉你。但我真的不明白你所说的“同名的多个类”是什么意思。
我经常为内容管理网站这样做，以便用户可以设置顶级颜色，然后它会级联，因此所有具有颜色类的项目都设置为该颜色
那么我很抱歉。我认为既然我定义了 3 种不同的颜色，那么每种颜色都会被认为是唯一的。

标签： css class

【解决方案1】：

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

.color {color:orange;}

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

.first .color {color:blue;}

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

.second .color {color:red;}

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

【讨论】：

非常清楚，谢谢。仍然有更好的方法来定义它们吗？喜欢使用选择器
你对Defines that any element with class color that is an ancestor of an element with class first is blue的理解是错误的。实际上color 不是first 的祖先。 color 是 first 的后代，first 是 color 的祖先。
@MrCode 我已经发现了，edited it。请参阅链接中的编辑 2 ;-)

【解决方案2】：

这是一个后代选择器：

.first .color {color:blue;}

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

来自W3C docs：

后代组合子 A B

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

【讨论】：

【解决方案3】：

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

【讨论】：