多个具有相同名称的类？

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

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