Zu den Selektoren in CSS gehören: 1. Einfacher Selektor; 3. Kombinationsselektor; 5. Pseudo-Elementselektor;
![Welche Selektoren gibt es in CSS?](https://img.php.cn/upload/article/202107/03/2021070310445476829.jpg)
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. |
| #footer
id-Selektor, stimmt mit allen Elementen überein, deren ID-Attribut gleich ist zur Fußzeile
|
2. Attributselektoren |
| 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
wählt Elemente aus, die mit A oder/und B
A übereinstimmen. B | wä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 ~ B | Wä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 wurde |
li:first-child | passt zum ersten untergeordneten Element li des übergeordneten Elements |
li: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 Pseudoelemente
|
| Selector
Bedeutung |
|
E::before | Erstellen 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:: danach | Erstellen Sie ein untergeordnetes Element innerhalb des E-Elements, fügen Sie den generierten Inhalt als Pseudoelement ein und platzieren Sie ihn am Ende |
E::selection | Wenden 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-line | entspricht dem ersten Buchstaben des E-Elements Eine Zeile |
6. Mehrfachselektoren
| In HTML geben wir manchmal mehrere Klassennamen an dasselbe Tag, wie zum Beispiel: <p class="one two"></p> | Und in CSS ist es möglich um mehrere Klassen gleichzeitig auszuwählen, etwa:
.one .two{} /*两个 class 中有空格*/
.one.two{} /*两个 class 中沒有空格*/
.one, .two{} /*两个 class 中出现逗号*/
Was ist der Unterschied zwischen diesen drei? |
| Zwischen 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.
【Empfohlenes Lernen: „ | CSS-Video-Tutorial“】 |
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!
Stellungnahme: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