Startseite>Webdesign-Tutorial>CSS-Tutorial

Erobern Sie erweiterte CSS-Selektoren

Autor：Eve Cole Aktualisierungszeit：2009-09-07 21:27:44

Originalartikel: Erobern Sie erweiterte CSS-Selektoren
Übersetzt aus:Taming Advanced CSS Selectors

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, diese Probleme in Ihren Tags zu vermeiden und sie prägnant 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. Auf diese Weise können wir auch unseren Code und unsere Stile flexibler gestalten .

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

  1. Die erste Zahl (a) ist normalerweise 0, es sei denn, das Stilattribut wird für das Tag verwendet;
  2. Die zweite Zahl (b) ist die Summe der Anzahl der IDs im Selektor;
  3. 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]);
  4. Die vierte Zahl (d) zählt Elemente (wie Tabelle, p, div usw.) und Pseudoelemente (wie: erste Zeile usw.);
  5. Der Universalselektor (*) hat Priorität 0;
  6. Wenn zwei Selektoren die gleiche Priorität haben, wird der spätere im Stylesheet wirksam.

Schauen wir uns ein paar Beispiele an, damit es 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 das erste, da es eine höhere Priorität hat als das zweite:

  • #sidebar p#first { color: red } – 0, 2, 0, 1
  • #sidebar p:first-line { color: blue } – 0, 1, 0, 2

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.

Nützliche Artikel:

Ähnliche Artikel