Einführung in CSS-Selektoren

Tag-Selektor

Zum Beispiel:

`p`、`a`、`h[1,6]`、`span`、`div`、、、

Klassenselektor (Klasse)

Klassenselektor wird mit „.“ definiert.

Zum Beispiel:

.id1{样式属性：值;}

Versuchen Sie, keine Unterstriche in Namen zu verwenden, da dies zu Kompatibilitätsproblemen führen kann. Unterstriche werden im Allgemeinen in JS verwendet und verwenden Sie keine reinen Zahlen oder chinesischen Namen.

Zum Beispiel:

<div class="class1"></div>

Hinweis: Der Klassenselektor

umfasst auch den Namensselektor für mehrere Klassen

<div class="class1 class2.."></div>

(Video-Tutorial-Empfehlung: CSS-Video-Tutorial)

ID-Selektor

ID-Selektor wird mit „#“ definiert. Zum Beispiel: #id1{style attribute: value;} Benennungsmethode wie Klassenselektor

Zum Beispiel:

<div id="id1"></div>

Platzhalterselektor

*{样式属性：值;}

Pseudoklassenselektor

Pseudoklassenselektor verknüpfen (hauptsächlich für das a-Tag, das fehlen kann, aber die Reihenfolge kann nicht umgekehrt werden)

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

Struktur (Position) Pseudo-Klassenselektor CSS3

:first-child Wählt den angegebenen Selektor aus, der zum ersten untergeordneten Element seines übergeordneten Elements gehört.

:last-child Wählt das letzte untergeordnete Element aus Element, das zu seinem übergeordneten Element gehört. Der angegebene Selektor

:nth-child(N) stimmt mit jedem Element überein, das das N-te untergeordnete Element seines übergeordneten Elements ist, unabhängig vom Typ des Elements, gezählt vom letzten untergeordneten Element. N kann eine Zahl, ein Schlüsselwort oder eine Formel sein

Schlüsselwort: ungerade ist eine ungerade Zahl gerade ist eine gerade Zahl

Ausdruck: 2n gerade Zahl 2n+1 ungerade Zahl n ist ein Vielfaches

:nth -last-child() zählt ab dem letzten untergeordneten Element. Der Standardwert ist das erste Element

Ziel-Pseudoklassenselektor

: Ziel-Pseudoklassenauswahl Der Selektor kann verwendet werden, um das aktuell aktive Zielelement auszuwählen

Selektor für untergeordnete Elemente

Der Selektor für untergeordnete Elemente kann nur Elemente auswählen, die vorhanden sind untergeordnete Elemente eines Elements.

Schreiben:

Das übergeordnete Element kommt zuerst, die Teilmenge kommt danach und die Mitte wird mit > verbunden.

Hinweis:> Auf beiden Seiten muss ein Leerzeichen stehen , ausgenommen Enkelkinder. Nur der Sohnsatz verwendet >, Sie können alle Nachkommen

Attributselektor

Selektor mit bestimmten speziellen Attributen auswählen Das Auswahl-Tag kann den Attributselektor

verwenden, um Folgendes zu schreiben: a[title] {} Der Attributselektor wird durch eckige Klammern div[class^=font] { } div[class$=font] { } beginnend dargestellt mit Schriftart Die Endung div[class*=tao] { } bedeutet, dass tao an jeder beliebigen Position stehen kann.

Pseudoelementselektor (CSS3)

.dome Klassenselektor: erstes Kind Pseudoklassenselektor::Pseudoelementselektor

E::first-letter Das erste Wort oder Zeichen des Textes

E::first-line Die erste Zeile des Textes

E::selection Kann das ändern ausgewählter Textstil (Maus)

E::before{ content: "text" } innerhalb der Box vor (Schriftart hinzufügen)

E::after{ content: "text" } innerhalb der Feld nach (Schriftart hinzufügen)

Empfohlenes Tutorial: CSS-Schnellstart

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