CSS-Grundlagen CSS Selectors_Basic Tutorial

Beispiel:

*[lang=fr] { Schriftgröße:14px; Breite:120px; 🎜>
2. Typselektor
Syntax:

E { sRules }

Beschreibung:
Typselektor. Verwenden Sie den Dokumentsprachenobjekttyp (Element) als Selektor.
Beispiel:

td { Schriftgröße:14px; Breite:120px }

a { text-decoration:none; }

3 🎜>Syntax:

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

Beschreibung:
Attributselektor.
Wählen Sie E mit dem Attribut attr aus.
Wählen Sie E mit dem Attribut attr und dem Attributwert gleich value aus.
Wählen Sie E mit dem Attribut attr und dem Attributwert aus, ist eine durch Leerzeichen getrennte Liste von Wörtern, von denen eines gleich wert ist. Der Wert hier darf keine Leerzeichen enthalten.
Wählen Sie das Attribut attr aus. Der Attributwert ist eine Liste von Wörtern, die durch Bindestriche getrennt sind und mit dem Wert E beginnen.
Beispiel:

h[title] { color: blue; }

/* Alle h-Objekte mit Titelattribut */



span[class=demo] { color: red; }



div[speed="fast"][dorun="no"] { color: red }



a[rel~="copyright"] { color :black; }

4. Enthält den Selektor
Syntax:

E1 E2 { sRules }


Beschreibung:
enthält den Selektor. Wählt alle in E1 enthaltenen E2 aus. Das heißt, E1.contains(E2)==true.
Beispiel:

table td { Font-Size:14px }

div.sub a { Font-Size:14px }

5. Unterobjektauswahl
Syntax:

E1 > E2 { sRules }

Beschreibung:
Unterobjektauswahl. Wählt alle E2 aus, die untergeordnete Elemente von E1 sind.
Beispiel:

body > p { font-size:14px }

/* Die Schriftgröße aller p-Objekte, die untergeordnete Objekte von body sind, beträgt 14px */



div ul>li p { font-size:14px; }

6.ID-Selektor
Syntax:

#ID { sRules }


Beschreibung:
ID-Selektor. Verwenden Sie die ID als eindeutige Kennung des Objekts im Dokumentbaum (DOM) als Selektor.
Beispiel:

#note {font-size:14px; width:120px;}

Klassenselektor
Syntax:

E.className { sRules }

Beschreibung:
Klassenselektor. Dieser Selektor kann in HTML verwendet werden. Seine Wirkung entspricht E [ class ~= className ]. Siehe Attributselektoren.
In IE5+ können Sie mehr als einen Wert ( className ) für das Klassenattribut (Eigenschaft) eines Objekts angeben, indem Sie einen Satz von durch Leerzeichen getrennten Stylesheet-Klassennamen angeben. Zum Beispiel:
.
Beispiel:

div.note { font-size:14px }

/* Die Schriftgröße aller div-Objekte, deren Klassenattributwert gleich (einschließlich) „note“ ist ist 14px */

.dream { font-size:14px; }

/* Die Schriftgröße aller Objekte, deren Klassenattributwert gleich ist (einschließlich) „note“ ist 14px */


8. Selektorgruppierung
Syntax:

E1 , E2 , E3 { sRules }

Beschreibung:
Selektorgruppierung. Um dieselbe Definition auf mehrere Selektoren anzuwenden, können Sie die Selektoren in durch Kommas getrennte Gruppen zusammenfassen.
Beispiel:

.td1,div a,body { Schriftgröße:14px }

td,div,a { Schriftgröße:14px }

9. Pseudoklassen- und Pseudoobjektselektoren

Syntax:

E : Pseudoklassen { sRules }

E : Pseudoelemente { sRules }

Beschreibung:
Pseudoklassen- und Pseudoobjektselektor.
Pseudoklassenselektor. Siehe Pseudoklassen[:link :hover :active :visited :focus :first-child :first :left :right :lang].
Pseudoobjektselektor. Siehe Pseudo-Elemente[:first-letter:first-line:before:after].
Beispiel:

div:first-letter { Schriftgröße:14px; }

a.fly:hover { Schriftgröße:14px; Farbe:rot }