Was sind die gängigen CSS3-Selektoren?

CSS3 ist eine Stylesheet-Sprache, die für Webdesign verwendet wird. Sie verfügt über umfangreiche Selektoren, die uns dabei helfen können, die zu formatierenden HTML-Elemente präziser anzugeben. Im Folgenden werden einige häufig verwendete CSS3-Selektoren vorgestellt und entsprechende Codebeispiele gegeben.

1. Elementselektor
   Der Elementselektor ist der einfachste Selektor, der bestimmte Elemente in einem HTML-Dokument für die Gestaltung auswählen kann. Um beispielsweise die Textfarbe aller Absatzelemente (

   ) auf Rot zu setzen, können Sie den folgenden Code verwenden:

p {
    color: red;
}

2. Klassenselektor
   Mit dem Klassenselektor können Elemente mit demselben Klassennamen ausgewählt werden Element. Indem wir einem Element ein Klassenattribut hinzufügen, können wir es mit der entsprechenden Stilregel verknüpfen. Um beispielsweise die Hintergrundfarbe aller Elemente mit der Klasse „class1“ auf Gelb zu setzen, können Sie den folgenden Code verwenden:

.class1 {
    background-color: yellow;
}

3. ID-Selektor (ID-Selektor)
   ID-Selektor ähnelt dem Klassenselektor und wird zum Auswählen verwendet angegebenes Element. Der Unterschied besteht darin, dass der ID-Selektor Elemente mit eindeutigen IDs auswählt. Durch das Hinzufügen eines ID-Attributs zu einem Element können wir es mit der entsprechenden Stilregel verknüpfen. Um beispielsweise die Schriftgröße eines Elements mit „id1“ auf 20 Pixel festzulegen, können Sie den folgenden Code verwenden:

#id1 {
    font-size: 20px;
}

4. Pseudo-Klassen-Selektor (Pseudo-Klassen-Selektor)
   Pseudo-Klassen-Selektor kann basieren auf den Zustand oder die Position des Elements. Wählen Sie Elemente aus, um sie anders zu gestalten. Zu den häufig verwendeten Pseudoklassenselektoren gehören:hover, :visited, :first-child usw. Damit der Linktext beispielsweise rot wird, wenn Sie mit der Maus über alle Links fahren, können Sie den folgenden Code verwenden:

a:hover {
    color: red;
}

5. Attribute Selector
   Der Attributselektor wählt Elemente für das Styling basierend auf ihren Attributen aus. Um beispielsweise die Rahmenfarbe aller Bilder mit dem Attribut „title“ auf Grün zu setzen, können Sie den folgenden Code verwenden:

img[title] {
    border: 1px solid green;
}

6. Child Selector
   Child Selector kann verwendet werden, um die direkten untergeordneten Elemente eines Elements auszuwählen. Um beispielsweise alle direkten Kinder (
7. ) in einer Liste (
   ) auszuwählen und deren Hintergrundfarbe auf Blau zu setzen, können Sie den folgenden Code verwenden:

ul > li {
    background-color: blue;
}

7. Negation Selector)
   Negative Selector can Entfernen Sie bestimmte Elemente aus einer Gruppe von Elementen für das Styling. Um beispielsweise Elemente außer allen Elementen mit der Klasse „class1“ auszuwählen und ihre Textfarbe auf Grau zu setzen, können Sie den folgenden Code verwenden:

:not(.class1) {
    color: gray;
}

Oben werden einige häufig verwendete CSS3-Selektoren vorgestellt, die uns bei der Auswahl und Gestaltung von HTML helfen können Elemente genauer. Durch den flexiblen Einsatz dieser Selektoren können wir problemlos verschiedene Effekte im Webdesign erzielen.

Das obige ist der detaillierte Inhalt vonWas sind die gängigen CSS3-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!