2. Pseudoklassen und Pseudoelemente
A. Nachkommenselektor nach :hover
Beispiel
| a:hover span { Farbe: #0f0; } |
beschreiben
Ein Element kann durch einen Selektor positioniert werden, der der Pseudoklasse :hover folgt, genau wie Nachkommenselektoren. Das obige Beispiel ändert die Farbe des Texts im span-Element innerhalb des a-Elements, wenn die Maus darüber bewegt wird.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
B. Chain-Pseudoklasse
Beispiel
| a:first-child:hover { Farbe: #0f0; } |
beschreiben
Pseudoklassen können verkettet werden, um die Elementauswahl einzuschränken. Im obigen Beispiel wird das erste a-Tag unter jedem übergeordneten Element lokalisiert und die Hover-Pseudoklasse P darauf angewendet.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
C. :schweben Sie in Nicht-Ankerelementen
Beispiel
| div:hover { Farbe: #f00; } |
beschreiben
Die Pseudoklasse :hover kann auf den Hover-Status jedes Elements angewendet werden, nicht nur auf Tags.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
D.:Pseudoklasse des ersten Kindes
Beispiel
| div li:first-child { Hintergrund: blau; } |
beschreiben
Ändern Sie die Pseudoklasse, um das erste untergeordnete Element des übergeordneten Elements jedes angegebenen Elements zu finden.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
Käfer
Wenn in IE7 ein HTML-Kommentar vor dem ersten zu positionierenden untergeordneten Element steht, ist die Pseudoklasse des ersten untergeordneten Elements ungültig.
E. :Fokus-Pseudoklasse
Beispiel
| a:fokus { Rand: 1 Pixel durchgehend rot; } |
beschreiben
Diese Pseudoklasse findet alle Elemente, die den Tastaturfokus haben.
Supportstatus
| IE6 Nr IE7Nr IE8 Ja |
F. :before und :after Pseudoklassen
Beispiel
| #box:before { Inhalt: „Dieser Text steht vor der Box“; } #box:nach { Inhalt: „Dieser Text befindet sich hinter der Box“; } |
beschreiben
Diese beiden Pseudoelemente fügen generierten Inhalt vor bzw. nach dem angegebenen Element hinzu und werden zusammen mit dem Inhaltsattribut verwendet.
Supportstatus
| IE6 Nr IE7Nr IE8 Ja |
3. Attributunterstützung
A. Die tatsächliche Größe, die durch die Position generiert wird
Beispiel
| #Kasten { Position: absolut; oben: 0; rechts: 100px; links: 0; unten: 200px; Hintergrund: blau; } |
beschreiben
Durch Definieren der oberen, rechten, unteren und linken Werte für ein absolut positioniertes Element erhält das Element seine tatsächliche Größe (Breite und Höhe), obwohl keine Werte für Breite und Höhe festgelegt sind.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
B. Mindesthöhe und Mindestbreite
Beispiel
| #Kasten { Mindesthöhe: 500 Pixel; Mindestbreite: 300 Pixel; } |
beschreiben
Diese beiden Eigenschaften geben die Mindestbreite bzw. -höhe des Elements an, sodass eine Box größer als der angegebene Mindestwert, aber nicht kleiner sein kann. Sie können zusammen oder separat verwendet werden.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |
C. Maximale Höhe und maximale Breite
Beispiel
| #Kasten { maximale Höhe: 500px; maximale Breite: 300 Pixel; } |
beschreiben
Diese beiden Eigenschaften geben die maximale Höhe bzw. Breite des Elements an. Eine Box darf kleiner als der angegebene Maximalwert sein, aber nicht größer. Sie können auch zusammen oder einzeln verwendet werden.
Supportstatus
| IE6 Nr IE7 Ja IE8 Ja |