So nutzen Sie CSS-Selektoren effizient

Dieses Mal zeige ich Ihnen, wie Sie CSS-Selektoren effizient nutzen und welche Vorsichtsmaßnahmen es gibt, um CSS-Selektoren effizient zu nutzen. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Als ich zum ersten Mal CSS schrieb, dachte ich, es sei sehr einfach und ich könnte es so wild wie möglich schreiben. Später stellte ich nach und nach fest, dass das Schreiben ohne Regeln zwar zu Ergebnissen führen kann, in der tatsächlichen Entwicklung jedoch zu mehr nutzloser oder wiederholter Arbeit führen kann und CSS nicht effizient ist. Daher haben wir uns bei der späteren Entwicklung bewusst an bestimmte Regeln gehalten, um möglichst effizientes und wiederverwendbares CSS zu schreiben. Zusammenfassend sind die Hauptaspekte die folgenden.

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

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

Vielleicht wird jeder vermuten, dass der Browser die oben genannten Regeln von links nach rechts erfüllt Stellen wir uns vor, dass der Browser zuerst das eindeutige Element mit der Menü-ID findet und dann den Stil auf sein direktes untergeordnetes Element, das li-Element, anwendet. 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 „mens“ ist.

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 Platzhalterregeln

Zusätzlich zu Platzhalter-Selektoren im herkömmlichen Sinne haben wir benachbarte Geschwister-Selektoren, Unter-Selektoren und Nachkommen-Selektoren, die mit Attribut-Selektoren übereinstimmen, in die Kategorie der Platzhalter-Regeln eingeteilt. Es wird empfohlen, nur ID-, Klassen- und Tag-Selektoren zu verwenden. .

2. Beschränken Sie die ID-Auswahl nicht

Eine angegebene ID kann nur einem Element auf der Seite entsprechen, daher besteht keine Notwendigkeit, zusätzliche hinzuzufügen Qualifikation. Beispielsweise ist p#header unnötig und sollte zu #header vereinfacht werden.

3. 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, einen wie .list-anchor zu erstellen Klasse und fügen Sie sie dem entsprechenden Element hinzu.

5. Vermeiden Sie die Verwendung von Nachkommenselektoren

Normalerweise sind die Kosten für die Verarbeitung von Nachkommenselektoren am höchsten, aber Sie können die gewünschten Ergebnisse auch durch die Verwendung von Unterselektoren erzielen Effizienter.

6. Vermeiden Sie die Verwendung von Tag-Unterselektoren

Wenn es Tag-basierte Unterselektoren wie #menus > Verwendet Eine Klasse, die jedem Beschriftungselement zugeordnet wird, z. B. .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 Festlegung von Regeln für diese Attribute. Geben Sie beispielsweise list-style-image

für ein Listenelement und nicht für jedes Listenelement an. Weitere Informationen zu den vererbbaren Eigenschaften der einzelnen Elemente finden Sie in der Liste der geerbten Eigenschaften.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

CSS3 zum Erstellen eines gestreiften Hintergrunds

CSS3 zum Erstellen eines halbkreisförmigen Bogens

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