So schreiben Sie effiziente CSS-Selektoren

Wir alle wissen, dass es viele Arten von CSS-Selektoren gibt. Wenn viele Leute CSS-Seiten schreiben, denken sie vielleicht, dass es Spaß macht und einfach ist, aber Sie werden langsam feststellen, dass es sich nur um das Schreiben ohne Regeln handelt, obwohl dies auch erreicht werden kann Der Effekt ist gut, aber in der tatsächlichen Entwicklung kann es zu mehr nutzloser Arbeit oder wiederholter Arbeit kommen, und CSS ist nicht effizient. In diesem Artikel zeigen wir Ihnen, wie Sie effizientes und wiederverwendbares CSS schreiben, hauptsächlich unter folgenden Gesichtspunkten.

Schauen Sie sich zunächst einen kurzen Teil des CSS-Codes an:

#menus > li { font-size: 14px; }

Vielleicht wird jeder erraten, dass der Browser die oben genannten Regeln von links nach rechts erfüllt das eindeutige id-Menüs-Element und wenden Sie dann den Stil auf sein direktes untergeordnetes Element li an auf die Elemente. Das scheint recht effizient zu sein.

CSS-Selektoren stimmen jedoch tatsächlich von rechts nach links überein. Daher ist die obige Regel nicht effizient. Der Browser muss jedes LI-Element auf der Seite durchlaufen und feststellen, ob die ID seines übergeordneten Elements vorhanden ist Menüs.

Das Stilsystem beginnt mit der Zuordnung der Regeln vom Selektor ganz rechts nach links. Solange sich links vom aktuellen Selektor weitere Selektoren befinden, bewegt sich das Stilsystem weiter nach links, bis es ein Element findet, das der Regel entspricht, oder aufgrund einer Nichtübereinstimmung beendet wird.

Es gibt die folgenden allgemeinen Regeln zum Schreiben effizienter CSS-Selektoren:

1. Vermeiden Sie die Verwendung von Wildcard-Regeln

Zusätzlich zu Wildcard-Selektoren im herkömmlichen Sinne verwenden wir benachbarte Geschwisterselektoren , Unterselektoren und Nachkommenauswahlattributselektoren werden alle nach Platzhalterregeln klassifiziert. Es wird empfohlen, nur ID-, Klassen- und Beschriftungsselektoren zu verwenden.

2. Beschränken Sie den ID-Selektor nicht

Eine angegebene ID kann nur einem Element auf der Seite entsprechen, sodass keine zusätzlichen Qualifikationsmerkmale hinzugefügt werden müssen. Beispielsweise ist div#header unnötig und sollte zu #header vereinfacht werden.

3. Schränken Sie die Klassenauswahl nicht ein

Beschränken Sie die Klassenauswahl nicht durch bestimmte Beschriftungen, sondern erweitern Sie den Klassennamen entsprechend der tatsächlichen Situation. Ändern Sie beispielsweise li.chapter in .li-chapter, oder noch besser, .list-chapter.

4. Machen Sie die Regeln so spezifisch wie möglich

Versuchen Sie nicht, lange Selektoren wie ol li a zu schreiben, es ist besser, eine Klasse wie .list-anchor zu erstellen und sie hinzuzufügen das entsprechende Element.

5. Vermeiden Sie die Verwendung von Nachkommenselektoren.

Die Verarbeitung von Nachkommenselektoren ist normalerweise am teuersten, aber die Verwendung von Unterselektoren kann auch die gewünschten Ergebnisse erzielen und ist effizienter.

6. Vermeiden Sie die Verwendung von Tag-Unterselektoren.

Wenn es Tag-basierte Unterselektoren wie #menus > gibt, sollte eine Klasse verwendet werden, um jedes Label zuzuordnen Elemente wie .menus-item.

7. Hinterfragen Sie alle Verwendungen von Unterselektoren.

Untersuchen Sie alle Verwendungen von Unterselektoren und ersetzen Sie sie nach Möglichkeit durch konkrete Klassen.

8. Verlassen Sie sich auf die Vererbung

Verstehen Sie, welche Attribute vererbt werden können, und vermeiden Sie dann die wiederholte Angabe von Regeln für diese Attribute. Geben Sie beispielsweise list-style-image für Listenelemente und nicht für jedes Listenelement an. Weitere Informationen zu den vererbbaren Eigenschaften der einzelnen Elemente finden Sie in der Liste der vererbten Eigenschaften.

Der obige Inhalt ist ein Tutorial zum Schreiben effizienter CSS-Selektoren. Ich hoffe, es kann allen helfen.

Verwandte Empfehlungen:

Zusammenfassung der Definitionen und Verwendung von CSS-Selektoren

CSS-Selektor

CSS Basic CSS Selector_Basic Tutorial

Das obige ist der detaillierte Inhalt vonSo schreiben Sie effiziente CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!