Kombination
Sie müssen nicht mehrere Selektoren mit denselben Attributen wiederholen, sondern müssen die Selektoren lediglich durch Kommas (,) trennen.
Sie haben beispielsweise den folgenden Code:
h2 { Farbe: rot }
.thisOtherClass { color: red }
.yetAnotherClass { color: red }
Dann können Sie schreiben:
h2, .thisOtherClass, .yetAnotherClass { color: red }
Mithilfe von Composition können Sie mehrere CSS gleichzeitig definieren und so eine Menge Bytes und Zeit sparen.
Verschachtelt
Wenn CSS gut strukturiert ist, besteht keine Notwendigkeit, zu viele Klassen oder Bezeichnerselektoren zu verwenden. Dies liegt daran, dass Sie Selektoren innerhalb von Selektoren angeben können. (Oder besser gesagt, Kontextauswahl – vom Übersetzer)
Zum Beispiel:
#top { Hintergrundfarbe: #ccc; padding: 1em }
#top h1 { color: #ff0 }
#top p { Farbe: rot; Schriftstärke: fett }
Dies eliminiert unnötige Klassen- oder Bezeichnerselektoren, wenn es wie folgt auf HTML angewendet wird:
<div id="top">
<h1>Schokoladen-Curry</h1> <p>Das ist mein Rezept für die Zubereitung von Curry rein mit Schokolade</p> <p>Mmm mm mmmmm</p>
</div>
Dies liegt daran, dass wir mithilfe englischer, halbbreiter, durch Leerzeichen getrennter Selektoren angeben, dass h1 in der ID-ID die Farbe „#ff0“ hat, während p rot und fett ist.
Dies kann auch etwas kompliziert sein (da es mehr als zwei Ebenen geben kann, z. B. innerhalb innerhalb innerhalb innerhalb innerhalb usw.). Du musst mehr üben.
Durch die Verwendung von Verschachtelungen lässt sich Ihr CSS-Code klarer lesen und Sie können CSS für die von Ihnen angegebenen Elemente anpassen.