Welche Selektoren gibt es in CSS?

CSS-Selektor; 2. Tag-Selektor; 5. Pseudo-Klassen-Selektor; . Angrenzender Geschwisterselektor; 11. Pseudoelementselektor.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Einführung in den CSS-Selektor:

1. Kategorieselektor

Der Klassenselektor wählt basierend auf dem Klassennamen aus, der mit „.“ gekennzeichnet ist.

Beispiel:

.demoDiv{
color:#FF0000;
}

2. Tag-Selektor

Eine vollständige HTML-Seite besteht aus vielen verschiedenen Tags und der Tag-Selektor bestimmt, welche Tags den entsprechenden CSS-Stil verwenden.

Die Deklaration des p-Tag-Stils in der Datei style.css lautet wie folgt:

p{
font-size:12px;
background:#900;
color:090;
}

3. ID-Selektor

Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind. Wählen Sie Elemente basierend auf der Element-ID aus, die eindeutig ist, was bedeutet, dass dieselbe ID nur einmal auf derselben Dokumentseite erscheinen kann.

ist mit einem „#“-Zeichen davor gekennzeichnet und kann wie folgt im Stil definiert werden:

#demoDiv{
color:#FF0000;
}

4. Der Nachkommenselektor wird auch Einschlussselektor genannt, der zur Auswahl der Nachkommen verwendet wird eines bestimmten Elements oder einer bestimmten Elementgruppe: Platzieren Sie die Auswahl des übergeordneten Elements vorne und die Auswahl der untergeordneten Elemente hinten, getrennt durch ein Leerzeichen in der Mitte.

<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>

5. Untergeordneter Selektor

Bitte beachten Sie den Unterschied zwischen diesem Selektor und dem Nachkommenselektor. Der untergeordnete Selektor bezieht sich nur auf seine direkten Nachkommen, oder Sie können ihn als den ersten Selektor verstehen, der auf untergeordnete Elemente wirkt. Der Nachkommenselektor wirkt auf alle untergeordneten Nachkommenelemente. Nachkommen-Selektoren wählen mit Leerzeichen aus, während untergeordnete Selektoren mit „>“ auswählen.

Sehen wir uns den folgenden Code an:

Beispielquellcode

CSS:

#links a {color:red;}
#links > a {color:blue;}

HTML:

<p id="links">
<a href="#">HTML中文网</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>

6. Pseudoklassenselektor

Manchmal müssen Sie andere Bedingungen als das Dokument verwenden, um den Stil anzuwenden eines Elements, z. B. Mauszeiger usw. Zu diesem Zeitpunkt müssen wir Pseudoklassen verwenden. Im Folgenden finden Sie die Pseudoklassendefinition für die verknüpfte Anwendung.

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}

7. Universeller Selektor

Universelle Selektoren werden durch * dargestellt. Beispiel:

*{
font-size: 12px;
}

bedeutet, dass die Schriftgröße aller Elemente gleichzeitig 12 Pixel beträgt. Der universelle Selektor kann auch mit dem Nachkommenselektor kombiniert werden.

8. Gruppenauswahl

Wenn mehrere Elemente die gleichen Stilattribute haben, können sie eine Anweisung zusammen aufrufen und die Elemente durch Kommas trennen. Zum Beispiel:

p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

Die Verwendung des Gruppenselektors vereinfacht den CSS-Code erheblich. Elemente mit mehreren gleichen Attributen können zur Auswahl in Gruppen zusammengefasst und dieselben CSS-Attribute definiert werden. Dies verbessert die Codierungseffizienz erheblich und reduziert auch die Größe CSS-Dateien.

9. Angrenzender Geschwisterselektor

Zusätzlich zum Kinderselektor und Nachkommenselektor oben möchten wir möglicherweise auch eines der beiden Geschwister finden, z. B. ein Titel-h1-Element, gefolgt von zwei Absatz-p-Elementen, die wir suchen möchten das p-Element des ersten Absatzes und wenden Sie Stile darauf an. Wir können den nebenstehenden Geschwisterselektor verwenden.

10. Attributselektor

Sie können CSS definieren, indem Sie beurteilen, ob ein bestimmtes Attribut des HTML-Tags vorhanden ist.

Attributselektoren werden basierend auf den Attributen des Elements abgeglichen.

11 Pseudoelementselektoren müssen dort platziert werden, wo der Pseudoelementselektor erscheint . Auf das Ende des Elementselektors, d. h. auf den Pseudoelementselektor, kann kein abgeleiteter Selektor folgen.

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!