Comment utiliser les pseudo-classes CSS

Comment utiliser les pseudo-classes CSS ?

Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux aux sélecteurs.

Syntaxe des pseudo-classes :

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 du lien peuvent être affichés de différentes manières

Instance

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

Remarque : dans la définition CSS, a:hover doit être défini Il n'est valable qu'après un:link et un:visited.

Remarque : Dans la définition CSS, a:active doit être placé après a:hover pour être valide.

Remarque : les noms de pseudo-classes ne sont pas sensibles à la casse.

Pseudo-classes et classes CSS

Les pseudo-classes peuvent être utilisées en conjonction avec les classes CSS :

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

Si le lien dans l'exemple ci-dessus a été visité, il apparaîtra en rouge.

Pseudo-classe CSS :first-child

Vous pouvez utiliser la pseudo-classe :first-child pour sélectionner le premier élément enfant d'un élément parent.

Remarque : dans les versions précédentes d'IE8, doit être déclaré pour que :first-child puisse prendre effet.

correspond au premier élément

Dans l'exemple suivant, le sélecteur correspond à l'élément

qui est le premier enfant de n'importe quel élément :

Exemple

p:first-child
{
    color:blue;
}

Correspond à tous les éléments

qui correspondent au premier élément

Dans l'exemple ci-dessous, sélectionne tous les éléments

instance

p > i:first-child
{
    color:blue;
}

correspond à tous les éléments

p:first-child i
{
    color:blue;
}

q:lang(no) {quotes: "~" "~";}