Welche Selektoren gibt es in CSS?

藏色散人
Freigeben: 2023-01-07 11:41:53
Original
7396 Leute haben es durchsucht

Zu den Selektoren in CSS gehören: 1. Einfacher Selektor; 3. Kombinationsselektor; 5. Pseudo-Elementselektor;

Welche Selektoren gibt es in CSS?

Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, Dell G3-Computer. Was sind die gängigen CSS-Selektoren?

E
Tag-Selektor, stimmt mit allen Elementen überein, die das E-Tag verwenden.

.infoclass-Selektor, stimmt mit allen Elementen überein, die Informationen im Klassenattribut enthalten. #footerid-Selektor, stimmt mit allen Elementen überein, deren ID-Attribut gleich ist zur Fußzeile Selektor Bedeutung [atrr]Wählen Sie alle Elemente aus, die das attr-Attribut Elemente enthalten, unabhängig vom Wert von attr [attr=val][attr=val] Wählen Sie nur alle Elemente aus, deren attr-Attribut den Wert val zugewiesen hat , B
2. Attributselektoren

wählt Elemente aus, die mit A oder/und B

A übereinstimmen. Bwählt Elemente aus, die mit B übereinstimmen und Nachkommen von Elementen sind, die mit A übereinstimmen (Leerzeichen trennen A und B)A > B Wählen Sie das Element aus, das mit B übereinstimmt und das direkte untergeordnete Element des Elements ist, das mit A übereinstimmt ~ BWählen Sie die nächsten N benachbarten Elemente aus, die mit B übereinstimmen und die Elemente sind, die mit A übereinstimmen Entspricht allen nicht angeklickten Links die Maus gedrückt, aber nicht losgelassen wurdeli:first-childpasst zum ersten untergeordneten Element li des übergeordneten Elementsli:last-child

Passt zum letzten untergeordneten Element li von das übergeordnete Element

li:nth-child(n)Übereinstimmung mit dem n-ten untergeordneten Element li des übergeordneten Elements (ungerade ungerade Zahl, gerade gerade Zahl) 5. Pseudoelemente PseudoelementeSelectorBedeutungE::beforeErstellen Sie ein untergeordnetes Element innerhalb des E-Elements, fügen Sie den generierten Inhalt als Pseudoelement ein und platzieren Sie ihn an der Vorderseite E:: danachErstellen Sie ein untergeordnetes Element innerhalb des E-Elements, fügen Sie den generierten Inhalt als Pseudoelement ein und platzieren Sie ihn am EndeE::selectionWenden Sie es auf den Teil des Dokuments an, der vom Benutzer hervorgehoben wird (z. B. mit dem mit der Maus ausgewählten Teil)E::first-letter

entspricht dem ersten Buchstaben des E-Elements, dem ersten Buchstaben der ersten Zeile

E::first-lineentspricht dem ersten Buchstaben des E-Elements Eine Zeile 6. MehrfachselektorenIn HTML geben wir manchmal mehrere Klassennamen an dasselbe Tag, wie zum Beispiel: Und in CSS ist es möglich um mehrere Klassen gleichzeitig auszuwählen, etwa:
.one .two{}    /*两个 class 中有空格*/
.one.two{}     /*两个 class 中沒有空格*/
.one, .two{}   /*两个 class 中出现逗号*/
Nach dem Login kopieren
Was ist der Unterschied zwischen diesen dreiZwischen dem ersten eins und dem ersten zwei ist ein Leerzeichen, was bedeutet, dass ich zwei in einem sein muss, um ausgewählt zu werden. Zwischen der zweiten eins und zwei gibt es kein Leerzeichen, was bedeutet, dass ein bestimmter Block sowohl eine als auch zwei Klassen haben muss, bevor er von CSS ausgewählt werden kann. Das dritte eins und zwei enthalten Kommas, was bedeutet, dass, wenn es eins oder zwei in der Klasse gibt, diese vom Editor ausgewählt werden. Einfach ausgedrückt: Keine Leerzeichen bedeuten, dass sie gleichzeitig enthalten sein müssen, um ausgewählt zu werden. Leerzeichen bedeuten, dass die folgende Klasse ausgewählt wird, wenn sie in die vorherige Klasse eingebettet ist enthalten ist, wird es ausgewählt. CSS-Video-Tutorial
<p class="one two"></p>
Nach dem Login kopieren
?
【Empfohlenes Lernen: „“】

Das obige ist der detaillierte Inhalt vonWelche Selektoren gibt es in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage