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;}

定义任何类颜色的元素是第一个 的元素的后代是蓝色的

.second .color {color:red;}

定义类颜色 的任何元素是类第二 的元素的后代是红色的

Answer 2

这是一个后代选择器：

.first .color {color:blue;}

将定位具有类color的元素，该元素是具有类first的元素的后代。请注意，这与子选择器（>）不同，后者仅匹配直接子项。后代选择器匹配来自父级的任何级别的元素。

来自W3C docs：

后裔组合子A B

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

Answer 3

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

多个具有相同名称的类？

3 个答案: