Wie werden CSS-Selektorprioritäten bestimmt?

Im Prozess der Website-Erstellung ist CSS ein wichtiges Attribut zur Steuerung des Webseitenstils. Daher wird dieser Artikel das relevante Wissen über CSS-Klassenselektoren und CSS-Prioritätsranking zusammenfassen und Ihnen vorstellen.

Lassen Sie mich zunächst die Arten von CSS-Selektoren vorstellen:

1. Tag-Namen-Selektor

Finden Sie anhand des angegebenen Tag-Namens alle Namen von Fügen Sie diesen Namen in die aktuelle Schnittstellenbezeichnung ein und legen Sie dann die Eigenschaften fest.

Der Tag-Selektor wählt alle Tags mit diesem Namen in der aktuellen Benutzeroberfläche aus und kann kein einzelnes Tag einzeln auswählen, egal wie tief das Tag verborgen ist Tag in HTML Beide können als Tag-Selektoren verwendet werden.

2. Klassenauswahl

Suchen Sie das entsprechende Tag entsprechend dem angegebenen Klassennamen und legen Sie dann die Attribute fest.

Jedes HTML-Tag hat ein Klassenattribut, was bedeutet, dass die Klasse beim Schreiben des ID-Selektors nicht wiederholt werden kann Die Namenskonvention für Klassennamen ist dieselbe wie die Namenskonvention für IDs. Der Klassenname dient speziell dazu, den Stil für ein bestimmtes Tag in HTML festzulegen. Jedes Tag kann an mehrere Klassennamen gleichzeitig gebunden werden.

3. ID-Auswahl.

Suchen Sie das entsprechende Tag basierend auf dem angegebenen ID-Namen und legen Sie dann die Attribute fest.

Jedes HTML-Tag hat ein ID-Attribut, was bedeutet, dass die ID nicht in derselben Schnittstelle wiederholt werden kann. Stellen Sie sicher, dass Sie # vor der ID hinzufügen. Der Name der ID hat bestimmte Spezifikationen. Der Name der ID kann nur aus Buchstaben, Zahlen und Unterstrichen bestehen. Er darf nicht mit einer Zahl beginnen. In der Unternehmensentwicklung wird er im Allgemeinen nicht verwendet. weil die ID für js ist.

Wie teilt man das CSS-Prioritätsranking auf?

Im Allgemeinen gilt: Je spezieller ein Selektor ist, desto höher ist seine Priorität. Das heißt, je genauer die Auswahlpunkte sind, desto höher ist ihre Priorität.

Normalerweise verwenden wir 1, um die Priorität des Tag-Namen-Selektors anzugeben, 10, um die Priorität des Klassen-Selektors anzugeben, und 100, um die Priorität des ID-Selektors anzugeben.

Im obigen Beispiel ist die Selektorpriorität von .polaris span {color:red;} 10 + 1, was 11 ist, während die Priorität von .polaris natürlich 10 ist; rote Wörter. Nachdem man dieses Prinzip verstanden hat, ist die folgende Prioritätsberechnung einfach:

div.test1 .span var Priority 1+10 +10 +1

span#xxx .songs li Priority 1 +100 + 10 + 1

#xxx li Priorität 100 +1

Was den Selektor betrifft, der unter welchen Umständen verwendet werden soll, ist das Prinzip der Verwendung verschiedener Selektoren:

Nein: Genau Wählen Sie die zu steuernden Tags aus.

Zweitens: Verwenden Sie den Selektor mit der angemessensten Priorität.

Drittens: Halten Sie die HTML- und CSS-Codes so prägnant und schön wie möglich.

Das obige ist der detaillierte Inhalt vonWie werden CSS-Selektorprioritäten bestimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!