CSS pseudo-classes
sélecteurs de pseudo-classe CSS sont utilisés pour ajouter des effets spéciaux.
grammaire
Pseudo-classe syntaxe:
classes CSS peuvent également utiliser la pseudo-classe:
pseudo classes d'ancrage
le support des CSS dans les navigateurs, état différent du lien peut être affiché de différentes façons
Exemples
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Essayez »
Remarque: définition CSS, a: hover doit être placé dans un: lien et a: après visité, est efficace.
Remarque: définition CSS, un: actif doit être placé dans un: hover après, pour être efficace.
Remarque: Le nom depseudo-classe ne sont pas sensibles à la casse.
Les pseudo-classes et des classes CSS
Les pseudo-classes peuvent être utilisées en conjonction avec des classes CSS:
<a class="red" href="css-syntax.html"> CSS Syntaxe </a>
Si le lien ci-dessus par exemple a été visité, il sera affiché en rouge.
CSS -: premier - enfant pseudo-classe
Vous pouvez utiliser le: first-child pseudo-classe sélectionne le premier élément enfant
Remarque: Vous devez être déclaré dans la version précédente de IE8 <! DOCTYPE> , comme ceci: first-child prenne effet.
Faites correspondre le premier élément <p>
Dans l'exemple suivant, le sélecteur correspond à l'élément <p> comme premier enfant de tout élément d'élément:
Exemples
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Essayez »
Faites correspondre tous les éléments <p> dans le premier élément <i>
Le premier élément <i> dans l'exemple suivant, le sélecteur correspond à tout élément <p>:
Exemples
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Essayez »
<H2 match tout comme le premier élément de l'élément <p> Dans l'ensemble des enfants <i> éléments:
Exemples
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Essayez »
CSS -: lang pseudo-classe
: Lang pseudo-classe vous permet d'avoir la capacité pour les différentes langues définissent des règles spéciales
Note: IE8 doit déclarer le <! DOCTYPE> Pour soutenir; lang pseudo-classe.
Dans l'exemple suivant ,: type de classe lang valeur d'attribut de q pas de définitions d'éléments citations:
Exemples
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Essayez »
D'autres exemples
Ajouter des styles différents à des hyperliens
Cet exemple montre comment ajouter d'autres styles d'hyperliens.
Utilisation: focus
Cet exemple montre comment utiliser le: concentrer pseudo-classe.
Toutes les CSS pseudo-classes / éléments
| sélecteur | exemple | L'exemple montre |
|---|---|---|
| : checked | input:checked | Tout élément de formulaire sélectionné |
| : désactivé | input:disabled | Sélectionnez tous les éléments de formulaire handicapés |
| : vide | p:empty | Sélectionnez tous les éléments p aucun enfant |
| : activé | input:enabled | Sélectionnez tous les éléments de formulaire activés |
| : First-of-Type | p:first-of-type | Sélectionnez chaque élément parent est les premiers éléments p p élément enfant |
| : In-gamme | input:in-range | Sélectionnez les valeurs des éléments dans une plage spécifiée |
| : invalide | input:invalid | Sélectionnez tous les éléments non valides |
| : Last-child | p:last-child | Sélectionnez tous les éléments p dans le dernier élément enfant |
| : Dernier-type | p:last-of-type | Sélectionner chaque élément p est le dernier élément d'un élément parent p |
| : Non (sélecteur) | :not(p) | Sélectionnez tous les éléments autres que le p |
| : Nth-child (n) | p:nth-child(2) | Sélectionner tous les éléments p dans le deuxième sous-élément |
| : Nth-last-child (n ) | p:nth-last-child(2) | Sélectionnez tous les éléments de l'inverse de p second élément enfant |
| : Nth-last-of-type (n) | p:nth-last-of-type(2) | Sélectionner tous les éléments p est l'inverse de la deuxième sous-élément p |
| : Nth-of-type (n ) | p:nth-of-type(2) | Sélectionnez tous les éléments p dans le deuxième sous-élément pour la p |
| : Seulement-of-type | p:only-of-type | Sélectionnez tout simplement un élément de p éléments de l'enfant |
| : Seul enfant | p:only-child | Sélectionnez tout simplement un élément de p éléments de l'enfant |
| : en option | input:optional | Choisissez pas l'attribut "nécessaire" de l'élément |
| : Out-of-range | input:out-of-range | Sélectionnez élément d'attribut en dehors de la plage de valeurs |
| : Lecture seule | input:read-only | Sélectionnez l'attribut de lecture seule des attributs de l'élément |
| : Lecture-écriture | input:read-write | Choisir de ne pas en lecture seule attribut des propriétés de l'élément |
| : nécessaire | input:required | Choisissez "nécessaire" attribut spécifie les propriétés de l'élément |
| : root | root | Sélectionnez l'élément racine du document |
| : cible | #news:target | Sélectionnez l'élément de l'activité en cours (cliquez sur une URL qui contient le nom de l'ancre) |
| : valide | input:valid | Sélectionnez toutes les valeurs valides pour les propriétés |
| : lien | a:link | Sélectionnez tous les liens non visités |
| : visited | a:visited | Sélectionnez tous les liens visités |
| : actif | a:active | Select est un lien actif |
| : hover | a:hover | Placez la souris sur l'état de liaison |
| : focus | input:focus | Après avoir sélectionné l'élément d'entrée a le focus |
| : First-letter | p:first-letter | Sélectionnez la première lettre de chaque élément <p> |
| : First-line | p:first-line | Sélectionnez la première ligne de chaque élément <p> |
| : First-child | p:first-child | <] P> élément sélecteur correspond à tout élément appartenant au premier élément enfant |
| : avant | p:before | Insérez le contenu avant de chaque élément <p> |
| : après | p:after | Insérez le contenu après chaque élément <p> |
| : Lang (langue) | p:lang(it) | sélection de l'attribut lang élément <p> à une valeur de départ |