Heim >Web-Frontend >CSS-Tutorial >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.
#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.
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!