2. Pseudo-classes et pseudo-éléments
A.: Le sélecteur descendant derrière le volant
Exemple
| A: Hover Span { Couleur: # 0f0; } |
décrire
Un élément peut être positionné par un sélecteur derrière la pseudo-classe de survol, tout comme un sélecteur descendant. Dans l'exemple ci-dessus, lorsque la souris plane, la couleur du texte de l'élément de portée de l'élément A sera modifiée.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
B. pseudo-catégorie de la chaîne
Exemple
| A: Premier enfant: volant { Couleur: # 0f0; } |
décrire
Les pseudo-classes peuvent être enchaînées pour réduire la sélection des éléments. L'exemple ci-dessus localisera la première balise sous chaque élément parent et appliquera le Pseudo-classe P.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
C. parmi les éléments non ancrés: planer
Exemple
| Div: Hover { Couleur: # F00; } |
décrire
La pseudo-classe de survol peut être appliquée à l'état de survol de n'importe quel élément, pas seulement à la balise A.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
D.: Pseudo-classe de premier enfant
Exemple
| Div Li: Premier enfant { Contexte: bleu; } |
décrire
La classe pseudo-modifiée localise le premier élément enfant de l'élément parent de chaque élément spécifié.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
Insectes
Dans IE7, si le premier élément enfant à localiser a des commentaires HTML auparavant, la première pseudo-classe sera invalide
E .: Focus pseudo-classe
Exemple
| A: Focus { Border: 1px rouge solide; } |
décrire
Cette pseudo-classe localise tous les éléments avec une mise au point du clavier.
Soutien
| IE6 Non IE7 Non IE8 Oui |
F ,: avant et: après des pseudo-classes
Exemple
| #box: avant { Contenu: "Ce paragraphe est devant la boîte"; } #box: après { Contenu: "Ce paragraphe est derrière la boîte"; } |
décrire
Ces deux pseudo-éléments ajoutent le contenu généré avant et après l'élément spécifié et l'utilisent avec l'attribut de contenu.
Soutien
| IE6 Non IE7 Non IE8 Oui |
3. Attribut support
A. La taille réelle générée par position
Exemple
| #boîte { Position: absolue; en haut: 0; À droite: 100px; à gauche: 0; En bas: 200px; Contexte: bleu; } |
décrire
La définition des valeurs supérieure, droite, inférieure et gauche aux éléments absolument positionnés donnera la taille réelle (largeur et hauteur) de l'élément, bien qu'il n'y ait pas de réglage pour faire les valeurs de largeur et de hauteur.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
B. Min-Height et Min-largeth
Exemple
| #boîte { Min-Height: 500px; largeur min: 300px; } |
décrire
Ces deux propriétés spécifient les valeurs minimales de la largeur et de la hauteur de l'élément, permettant à une boîte d'être supérieure à la valeur minimale spécifiée, mais pas plus petite. Ils peuvent être utilisés ensemble ou séparément.
Soutien
| IE6 Non IE7 Oui IE8 Oui |
C, max-hauteur et largeur max
Exemple
| #boîte { max-height: 500px; largeur maximale: 300px; } |
décrire
Ces deux propriétés spécifient les valeurs maximales de la hauteur et de la largeur de l'élément, permettant à une boîte d'être plus petite que la valeur maximale spécifiée, mais pas plus grande. Ils peuvent également être utilisés simultanément ou individuellement.
Soutien
| IE6 Non IE7 Oui IE8 Oui |