Pseudo-classes CSS
Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux aux sélecteurs.
Syntaxe
Syntaxe de pseudo-classe :
selector:pseudo-class {property:value;}
Les classes CSS peuvent également utiliser des pseudo-classes :
selector.class:pseudo-class {property:value;}
pseudo-classe d'ancrage
Dans les navigateurs prenant en charge CSS, différents états des liens peuvent être affichés de différentes manières. Dans notre lien CSS, nous avons appris un peu plus sur
instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已浏览过的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过的链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
</style>
</head>
<body>
<p><b><a href="" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>Remarque : a:hover est requis Après un:link et un:visited, ils doivent être dans un ordre strict pour voir l'effet.
Remarque : a:active doit venir après a:hover.
Remarque : Les noms de pseudo-classes ne sont pas sensibles à la casse.
Exécutez le programme et essayez-le
Les pseudo-classes et les classes CSS
Les pseudo-classes peuvent être utilisées avec CSS classes ：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html "> Syntaxe CSS< /a>
Si le lien dans l'exemple ci-dessus a été visité, il apparaîtra en rouge.
Instance
Utiliser : focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="" method="get">
姓名: <input type="text" name="fname" /><br>
留言: <input type="text" name="content" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>Exécutez le programme et essayez-le
Tous les pseudo-classes/éléments CSS
| Sélecteur | Exemple | Exemple de description |
|---|
| :coché | entrée : coché | Sélectionnez tous les éléments de formulaire cochés |
| :disabled | input:disabled | Sélectionnez tous les éléments de formulaire désactivés |
| :vide | p:vide | Sélectionnez tous les éléments p qui n'ont pas d'éléments enfants |
| :activé | input:enabled | Sélectionner tous les éléments de formulaire activés |
| :first-of-type | p:first-of-type | sélectionne le premier p élément enfant de chaque élément parent qui est un p élément |
| :in-range | input:in-range | Sélectionnez les valeurs dans la plage d'éléments spécifiée |
| :invalid | input:invalid | Sélectionnez tous les éléments invalides |
| :last-child | p:last-child | Sélectionnez le dernier élément enfant de tous les p éléments |
| : last-of-type | p:last-of-type | Sélectionne chaque élément p qui est le dernier élément p de son élément parent |
| :not(selector) | :not(p) | Sélectionner tous les éléments autres que p |
| :nth-child(n) | p:nth-child(2) | Sélectionnez le deuxième élément enfant de tous les p éléments |
| :nth-last-child(n) | p:nth-last-child(2) | Sélectionnez l'avant-dernier élément enfant de tous les p éléments |
| :nth-last-of-type( n) | p:nth-last-of-type(2) | Sélectionnez l'avant-dernier élément enfant de p pour tous les p éléments |
| :nth-of-type(n) | p:nth-of-type(2) | Sélectionnez tous les p éléments dont le deuxième élément enfant est p |
| :only-of-type | p:only-of-type | Sélectionner tous les éléments avec un seul élément enfant p |
| :only-child | p:only-child | Sélectionnez tous les p éléments qui n'ont qu'un seul élément enfant |
| :facultatif | input:facultatif | Sélectionnez les attributs de l'élément sans "obligatoire" |
| :hors de portée | input :hors de portée | Sélectionner les attributs d'élément avec des valeurs en dehors de la plage spécifiée |
| :lecture seule | input:lecture seule | Sélectionner l'élément attributs avec des attributs en lecture seule |
| :read-write | input:read-write | Sélectionner des éléments sans attributs en lecture seule Attributs d'élément |
| :obligatoire | input:obligatoire | Sélectionnez les attributs d'élément spécifiés par l'attribut "obligatoire" |
| :root | root | Sélectionnez l'élément racine du document |
| :target | #news:target | Sélectionnez l'élément #news actif actuel (cliquez sur l'URL contenant le nom de l'ancre) |
| :valid | input:valid | Sélectionnez toutes les propriétés avec des valeurs valides |
| :link | a :lien | Sélectionnez tous les liens non visités |
| :visité | a:visité | Sélectionnez tous les liens visités |
| :active | a:active | Sélectionnez le lien actif |
| :hover | a:hover | L'état de placement de la souris sur le lien |
| :focus | input:focus | Sélectionner l'entrée de l'élément Après avoir mis le focus |
| :first-letter | p:first-letter | sélectionne la première lettre de chaque élément <p> |
:first-line | p:first-line | Sélectionne la première ligne | de chaque élément <p> Le sélecteur >
:first-child| p:first-child | correspond à l'élément <]p> | < qui est le premier enfant de n'importe quel élément 🎜><. 🎜>:avant |
p:avant| Insérer du contenu avant chaque élément <p> | | :après |
p:after| Insérer du contenu après chaque élément <p> | | :lang( | langue
)| p : lang(it)Choisissez une valeur de départ pour l'attribut lang de l'élément <p> | | |
section suivante
