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 firstを持つ要素の子孫であるclass color を持つ要素はすべて青であることを定義します

.second .color {color:red;}

クラスsecondを持つ要素の子孫であるクラスcolor を持つ要素はすべて赤であることを定義します

Answer 2

動作しますが、この場合はあまり読みにくくなります。