Was sind die Selektoren in CSS? Kennen Sie die Prioritätsreihenfolge der Selektoren?

Als Front-End-Ingenieur sind Ihnen CSS-Selektoren nicht fremd. Selektoren sind ein wesentlicher Bestandteil unseres Layouts. Wissen Sie also, was -Selektoren in CSS sind? Wie ist die Prioritätsreihenfolge von CSS-Selektoren? Nur wenn Sie die Geheimnisse kennen, können Sie sich bei der Arbeit wohler fühlen. Lassen Sie uns als Nächstes über CSS-Selektoren und ihre Prioritätsreihenfolge sprechen.

1. Was sind die CSS-Selektoren?

Es gibt viele Selektoren in CSS, wie zum Beispiel: ID-Selektor, Klassenselektor, Platzhalterselektor, Pseudoklassenselektor Lassen Sie uns hauptsächlich einige häufig verwendete vorstellen.

1. Tag-Selektor

Syntax: Tag-Name {}, z. B.: h1{} // Stile für alle h1-Elemente festlegen.

2. ID-Selektor

Syntax: #id name{} //Der ID-Wert muss eindeutig sein und kann nicht wiederholt werden, z. B.: #top{} //Legen Sie den Stil für das Element fest mit der ID von top.

3. Klassenselektor

Syntax: .class{}, z. B.: .box{} //Stile für alle Elemente festlegen, deren Klassenwert box ist.

4. Gruppenselektor

Syntax: Selektor 1, Selektor 2, Selektor N{}, z. B.: #box1,.box2,p{} //Die ID ist box1, die Klasse legt fest Stil für die Elemente von box2 und p zusammen.

5. Wildcard-Selektor

Syntax: *{}, z. B.: *{font-size: 16px} //Stellen Sie die Schriftgröße der gesamten Seite auf 16px ein.

6. Nachkommenselektor

Syntax: Selektor 1 Selektor 2{}, z. B.: p .aa{} //Wählen Sie den angegebenen Nachkommen .aa des angegebenen Vorfahrenelements p aus.

7. Selektor für untergeordnete Elemente

Syntax: übergeordnetes Element>untergeordnetes Element{}, z. B.: p>.box{} //Wählen Sie das angegebene untergeordnete Element .box des übergeordneten Elements p aus. Beachten Sie den Unterschied zum Selektor für untergeordnete Elemente

8. Pseudoklassenselektor

Pseudoklassen können zur Darstellung einiger Sonderzustände verwendet werden, z. B.:
: Link – nicht besuchter Superlink .
: besucht – ein Hyperlink, der besucht wurde.
: Hover – das Element, über das die Maus fährt.
: aktiv – das Element, auf das geklickt wird.

zB: a:hover{color:red} //Wenn die Maus über die a-Beschriftung fährt, ändert sich die Farbe in Rot.

2. Prioritätsreihenfolge der CSS-Selektoren

Wenn unterschiedliche Werte desselben Attributs auf dasselbe Element angewendet werden und ein Konflikt zwischen den definierten Attributen besteht Wessen Wert also verwendet werden soll, betrifft diesmal die Prioritätsreihenfolge von CSS.
1. Die Verwendung von !important nach einem Attribut überschreibt den an einer beliebigen Stelle auf der Seite definierten Elementstil.
2. Interner Stil als Stilattribut innerhalb des Elements geschrieben
4. Tag-Selektor
7. Browser-angepasst oder geerbt

Zusammenfassungssortierung: !important >
Zusammenfassung: Das Obige fasst die häufig verwendeten Selektoren in CSS und ihre Syntaxregeln zusammen. Was die Prioritätsreihenfolge des Selektors betrifft, wird hier nur die endgültige Schlussfolgerung gegeben. Sie müssen es noch selbst ausprobieren. Es wird hier keine Demonstration geben. Ich hoffe, dieses Tutorial kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonWas sind die Selektoren in CSS? Kennen Sie die Prioritätsreihenfolge der Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!