Es gibt keinen „Hypertext-Markup-Selektor“ in CSS; die in CSS enthaltenen Selektoren sind: ID-Selektor, Klassen-Selektor, Tag-Selektor, untergeordneter Selektor, Pseudo-Klassen-Selektor, Pseudo-Element-Selektor, Universal-Selektor „*“ , Attributselektor, Gruppenselektor, benachbarter Geschwisterselektor.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
Einführung in den CSS-Selektor:
1. Kategorie-(Klassen-)Selektor
Der Klassenselektor wählt basierend auf dem Klassennamen aus, dem ein „.“ vorangestellt 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.
黑色
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;}
CSS-Video-Tutorial
)Manchmal du Sie müssen andere Bedingungen außerhalb des Dokuments verwenden, um den Stil des Elements anzuwenden, 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; }
Universelle Selektoren werden durch * dargestellt. Beispiel:
*{ font-size: 12px; }
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; }
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.
Programmiervideos
! !
Das obige ist der detaillierte Inhalt vonVerfügt CSS über einen Hypertext-Tag-Selektor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
