2. Pseudoklassen und Pseudoelemente
A.: Der Nachkomme -Selektor hinter dem Schwebede
Beispiel
| A: Hover Span { Farbe: #0f0; } |
beschreiben
Ein Element kann von einem Selektor hinter der: Hover-Pseudo-Klasse positioniert werden, genau wie ein Nachkommenswähler. Im obigen Beispiel wird die Farbe des Textes im Element A in Element A geändert, wenn die Maus schwebt.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
B. Kettenpseudo-Kategorie
Beispiel
| A: Erstkind: Hover { Farbe: #0f0; } |
beschreiben
Pseudoklassen können gekettet werden, um die Elementauswahl einzugrenzen. Das obige Beispiel sucht das erste ein Tag unter jedem übergeordneten Element und wendet die Hover Pseudo-Klasse P darauf an.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
C. Unter Nicht-Anel-Elementen: Schwebe
Beispiel
| Div: Hover { Farbe: #f00; } |
beschreiben
Die: Hover Pseudo-Klasse kann auf den Schwebezustand eines beliebigen Elements angewendet werden, nicht nur auf das A-Tag.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
D.: Pseudoklasse der ersten Kind
Beispiel
| div li: Erstkind { Hintergrund: Blau; } |
beschreiben
Die Pseudo-modifizierte Klasse lokalisiert das erste untergeordnete Element des übergeordneten Elements jedes angegebenen Elements.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
Käfer
In IE7 ist die erste Kinder-Pseudo-Klasse ungültig, wenn das erste zu findene erste untergeordnete untergeordnete Element HTML-Kommentare enthält
E.: Fokus Pseudoklasse
Beispiel
| A: Fokus { Grenze: 1px solide Rot; } |
beschreiben
Diese Pseudoklasse findet alle Elemente mit Tastaturfokus.
Unterstützung
| Dh6 nein IE7 Nr Dh8 ja |
F,: vor und: nach pseudoklassesklasse
Beispiel
| #box: vor { Inhalt: "Dieser Absatz befindet sich vor der Box"; } #box: nach { Inhalt: "Dieser Absatz befindet sich hinter der Box"; } |
beschreiben
Diese beiden Pseudo-Elemente fügen den generierten Inhalt vor und nach dem angegebenen Element hinzu und verwenden ihn zusammen mit dem Inhaltsattribut.
Unterstützung
| Dh6 nein IE7 Nr Dh8 ja |
3. Attributunterstützung
A. Die tatsächliche Größe, die durch Position erzeugt wird
Beispiel
| #Kasten { Position: absolut; Top: 0; Rechts: 100px; links: 0; unten: 200px; Hintergrund: Blau; } |
beschreiben
Das Definieren von oberen, rechten, unten und linken Werten in absolut positionierten Elementen ergibt die tatsächliche Größe (Breite und Höhe) des Elements, obwohl es keine Einstellung gibt, um die Breite und die Höhenwerte zu erstellen.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
B. min-hohe und minbreite
Beispiel
| #Kasten { min-hohe: 500px; Min-Width: 300px; } |
beschreiben
Diese beiden Eigenschaften geben die Mindestwerte der Breite und Höhe des Elements an, sodass ein Kasten größer als der angegebene Mindestwert ist, jedoch nicht kleiner. Sie können zusammen oder getrennt verwendet werden.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
C, max-hohe und maximale Breite
Beispiel
| #Kasten { MAX-Hoch: 500px; Max-Breite: 300px; } |
beschreiben
Diese beiden Eigenschaften geben die maximalen Werte der Höhe und Breite des Elements an, sodass ein Kasten kleiner als der angegebene Maximalwert ist, aber nicht größer ist. Sie können auch gleichzeitig oder einzeln verwendet werden.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |