Welche Arten von Klassenselektoren gibt es?
- 百草Original
- 2023-10-07 14:00:032116Durchsuche
Zu den Klassenselektortypen gehören Basisklassenselektor, Mehrfachklassenselektor, hierarchischer Klassenselektor, Unterelementklassenselektor, benachbarter Geschwisterklassenselektor, universeller Geschwisterklassenselektor, Attributwertklassenselektor und Geräte zur Auswahl negativer Klassen usw. Detaillierte Einführung: 1. Grundlegender Klassenselektor, der einen mit einem Punkt beginnenden Selektor verwendet, bedeutet, Elemente mit angegebenen Klassennamen auszuwählen. 2. Mehrklassenselektor, der einen Selektor verwendet, der mehrere Klassennamen kombiniert, bedeutet, Elemente mit mehreren angegebenen Namen auszuwählen Bei Klassennamen sind keine Leerzeichen zwischen mehreren Klassennamen erforderlich. Schreiben Sie sie einfach nacheinander. 3. Hierarchische Klassenselektoren, durch Leerzeichen getrennte Selektoren usw.
Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.
Der Klassenselektor ist ein häufig verwendeter Selektor in CSS. Er wählt Elemente aus, die die Bedingungen über das Klassenattribut des Elements erfüllen. In CSS gibt es die folgenden Arten von Klassenselektoren:
1. Grundlegender Klassenselektor: Verwenden Sie einen Selektor, der mit einem Punkt (.) beginnt, um Elemente mit einem angegebenen Klassennamen auszuwählen. „.red“ bedeutet beispielsweise, dass alle Elemente mit dem Klassennamen „red“ ausgewählt werden.
2. Mehrfachklassenselektor: Ein Selektor, der eine Kombination mehrerer Klassennamen verwendet, um Elemente mit mehreren angegebenen Klassennamen auszuwählen. Zwischen mehreren Klassennamen sind keine Leerzeichen erforderlich. Schreiben Sie sie einfach nacheinander. Beispielsweise bedeutet „.red.bold“, dass Elemente mit den beiden Klassennamen „red“ und „bold“ ausgewählt werden.
3. Selektor für Nachkommenklassen: Verwenden Sie einen durch Leerzeichen getrennten Selektor, um Elemente mit einem angegebenen Klassennamen aus den Nachkommenelementen eines Elements auszuwählen. Beispielsweise bedeutet „div .red“, dass alle Elemente mit dem Klassennamen „red“ unter den Nachkommen des Elements „
4. Untergeordneter Klassenselektor: Verwenden Sie einen durch ein Größer-als-Zeichen (>) getrennten Selektor, um Elemente mit einem angegebenen Klassennamen aus den direkten untergeordneten Elementen eines Elements auszuwählen. Beispielsweise bedeutet „div > .red“, dass alle Elemente mit dem Klassennamen „red“ unter den direkten untergeordneten Elementen des „
5. Selektor für benachbarte Geschwisterklassen: Ein durch ein Pluszeichen (+) getrennter Selektor, der angibt, dass das Element mit dem angegebenen Klassennamen im ersten Geschwisterelement direkt nach einem Element ausgewählt wird. Beispielsweise bedeutet „h1 + .red“, dass das erste Element mit dem Klassennamen „red“ ausgewählt wird, das unmittelbar auf das Element „
“ folgt.
6. Allgemeiner Geschwisterklassenselektor: Verwenden Sie einen durch eine Tilde (~) getrennten Selektor, um Elemente mit einem angegebenen Klassennamen unter allen Geschwisterelementen auszuwählen, die einem Element folgen. Beispielsweise bedeutet „h1 ~ .red“, dass alle Elemente mit dem Klassennamen „red“ nach dem Element „
“ ausgewählt werden.
7. Attributwertklassenauswahl: Verwenden Sie eckige Klammern ([]) und Gleichheitszeichen (=), um Elemente mit angegebenen Attributwerten auszuwählen. Beispielsweise bedeutet „[class="red"]`, dass alle Elemente ausgewählt werden, deren Attributwert „class“ „red“ ist.
8. Negationsklassenselektor: Verwenden Sie den Doppelpunkt (:not()), um Elemente auszuwählen, die nicht den angegebenen Klassennamen haben. „:not(.red)“ bedeutet beispielsweise die Auswahl von Elementen, die nicht den Klassennamen „red“ haben.
Die oben genannten sind die gängigen Klassenselektortypen in CSS. Mithilfe dieser Selektoren können wir Elemente auf Webseiten basierend auf ihren Klassennamen auswählen und formatieren, um reichhaltige und vielfältige Effekte zu erzielen. Gleichzeitig kann es in Verbindung mit anderen Selektoren und Attributselektoren verwendet werden, um den Auswahlumfang und die Auswahlbedingungen weiter zu erweitern.
Das obige ist der detaillierte Inhalt vonWelche Arten von Klassenselektoren gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!