CSS ist eines der leistungsstärksten Tools, die Webdesignern zur Verfügung stehen. Damit können wir die Benutzeroberfläche einer Website in wenigen Minuten ändern, ohne die Seiten-Tags zu ändern. Aber trotz der Tatsache, dass jeder von uns erkennt, dass es nützlich ist, schöpfen CSS-Selektoren bei weitem nicht ihr Potenzial aus und manchmal neigen wir dazu, übermäßig viele und nutzlose Klassen, IDs, Divs, Spans usw. zu verwenden. Unser HTML ist sehr chaotisch.
Der beste Weg, die Verbreitung dieser „Plagen“ in Ihrem Markup zu verhindern und es sauber und semantisch zu halten, besteht darin, komplexere CSS-Selektoren zu verwenden, die auf bestimmte Elemente abzielen können, ohne zusätzliche Klassen oder IDs zu verwenden, und auf diese Weise können wir auch unseren Code erstellen und Stil flexibler .
CSS-Priorität
Bevor wir uns mit den erweiterten CSS-Selektoren befassen, ist es wichtig zu verstehen, wie CSS-Prioritäten funktionieren, damit wir wissen, wie wir unsere Selektoren richtig verwenden und nicht viel Zeit mit dem Debuggen verschwenden, solange wir auf Prioritäten achten um das Problem zu lösen, wenn
Wenn wir CSS schreiben, müssen wir uns darüber im Klaren sein, dass einige Selektoren höher sind als andere Selektoren in der Kaskade. Der Selektor, den wir am Ende schreiben, überschreibt nicht unbedingt die Stile, die wir zuvor für dasselbe Element geschrieben haben.
Wie berechnet man also die Priorität eines bestimmten Selektors ? Es ist ziemlich einfach, wenn man bedenkt, dass Prioritäten als vier durch Kommas getrennte Zahlen ausgedrückt werden, wie zum Beispiel: 1, 1, 1, 1 oder 0, 2, 0, 1
Die erste Zahl (a) ist normalerweise 0, es sei denn, das Stilattribut wird für das Tag verwendet;
Die zweite Zahl (b) ist die Summe der Anzahl der IDs in diesem Selektor;
Die dritte Zahl (c) ist die Gesamtzahl der anderen Attributselektoren und Pseudoklassen, die für diesen Selektor verwendet werden. Dazu gehören Klassen- (.example) und Attributselektoren (z. B. li[id=red]);
Die vierte Zahl (d) zählt Elemente (wie Tabelle, p, div usw.) und Pseudoelemente (wie: erste Zeile usw.);
Der Universalselektor (*) hat Priorität 0;
Wenn zwei Selektoren die gleiche Priorität haben, wird der spätere im Stylesheet wirksam.
Schauen wir uns ein paar Beispiele an, damit es vielleicht leichter zu verstehen ist:
#sidebar h2 – 0, 1, 0, 1
h2.title – 0, 0, 1, 1
h2 + p – 0, 0, 0, 2
#sidebar p:first-line – 0, 1, 0, 2
Im folgenden Beispiel funktioniert die erste, da sie eine höhere Priorität hat als die zweite:
#sidebar p#first { color: red } —
#sidebar p:first-line { color: blue } —
Es ist wichtig, zumindest ein grundlegendes Verständnis davon zu haben, wie Prioritäten funktionieren, aber einige Tools wie Firebug listen bei der Untersuchung eines bestimmten Elements alle CSS-Selektorpaare in der Reihenfolge ihrer Selektorpriorität auf, um uns mitzuteilen, welches sich auf einem bestimmten Element befindet ist nützlich, damit Selektoren gültig sind.
Dadurch können Sie ganz einfach erkennen, welcher Selektor auf ein Element wirkt.