Quels sont les types de pseudo-classes CSS ?

Les pseudo-classes CSS sont divisées en deux types : les pseudo-classes UI et les pseudo-classes structurées. Les pseudo-classes d'interface utilisateur sont divisées en pseudo-classes de lien, pseudo-classes de focus et pseudo-classes de cible. Les pseudo-classes structurées sont divisées en [:first-child], [:last-child] et [:nth-child].

Il existe deux types de pseudo-classes CSS :

1 pseudo-classe UI : lorsque l'élément HTML est dans un certain état. (comme le pointeur de la souris sur la connexion) pour appliquer un style CSS à cet élément.

2. Pseudo-classe structurée : lorsqu'il existe une certaine relation structurelle dans le balisage (par exemple, un élément étant le premier ou le dernier d'un groupe d'éléments), les styles CSS sont appliqués aux éléments de réponse. .

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Pseudo-classe d'interface utilisateur : L'élément de pseudo-classe d'interface utilisateur le plus couramment utilisé est le lien (un élément ).

est divisé en trois types :

1. Pseudo-classe de lien : Il y en a quatre au total, et le lien sera toujours dans l'un des quatre états.

(1) Lien Le lien est juste là, attendant que l'utilisateur clique.

(2) L'utilisateur visité a déjà cliqué sur ce lien.

(3) Survol Le pointeur de la souris survole le lien.

(4) Le lien Actif est cliqué (la souris est appuyée sur l'élément et n'a pas été relâchée).

2. Pseudo-classe focus (focus)

3. Pseudo-classe cible (si l'utilisateur clique sur un lien vers un autre élément dans une page carton, cet élément est la cible. Vous peut utiliser : la pseudo-classe cible le sélectionne. )

Pseudo-classe structurée :

1. : premier-enfant et : dernier-enfant

 : premier-enfant représente un groupe d'éléments frères et sœurs Le premier élément de , et :last-child représente le dernier.

2. :nth-child: sélectionnera chaque nième élément dans un ensemble d'éléments de liste.

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!