Quelles sont les pseudo-classes en CSS

Pseudo-classes CSS : ":active", ":any-link", ":blank", ":checked", ":current", ":first", ":first-child", ":future" , ":focus", ":has()", ":host", etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Le sélecteur de pseudo-classe (appelé : pseudo-classe) est défini par deux points, qui définit l'état de l'élément, tel que clic enfoncé, clic terminé, etc. Le style peut être modifié pour l'état de l'élément via pseudo-classe. Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux aux sélecteurs.

Liste des pseudo-classes en css

:actif	:any-link	:blank	:vérifié	:actuel	:par défaut
:défini	:dir()	:désactivé	:drop	:vide	:activé
:premier	:premier-enfant	:premier-de-type	:plein écran	:futur	:focus
:focus-visible	:focus -dans	:has()	:host	:host()	:host-context()
:hover	:indeterminate	:in-range:invalid	:is()	:lang()	:last-child
:last-of-type	:left	:link	:local-link	:not()	:nth-child()
:nth-col()	:nth-last-child()	:nth-last-col()	:nth-last-of-type()	:nth-of-type ()	:enfant unique
: uniquement de type	: facultatif	: hors de portée	: passé	: espace réservé affiché	: lecture seule
: lecture-écriture	: obligatoire	:right	:root	:scope	:target
:target-within	:user-invalid	:valid	:visited	:where()

Pseudo-classes couramment utilisées et leurs classifications

1 Sélecteur de pseudo-classe dynamique

Utilisez différents styles dans différents états. 2 , le sélecteur de pseudo-classe cible

• est utilisé pour faire correspondre un certain identifiant dans l'URI de la page L'élément cible du symbole.

  E:link

• Sélectionne tous les éléments qui correspondent à E, et les éléments correspondants sont pointés par l'URL correspondante.

  E:visited

  3. Le sélecteur de pseudo-classe de langue

• est utilisé pour faire correspondre les éléments en utilisant la langue spécifiée. E:active

• E:hover4. Sélecteur de pseudo-classe d'état d'élément

• Il ne fonctionne que lorsque l'élément est dans un certain état et ne fonctionne pas dans l'état par défaut.

  E:focus

eg:

input[type="checkbox"]:checked{}

E:target

eg:

input[type="text"]:checked{}

E:lang(language)

eg:

input[type="text"]:disabled{}

5. Sélecteur de pseudo-classe structurelle

• this Ils sont plus nombreux et sont utilisés plus fréquemment.

  E:checked

• E:enabled

• E:disabled

• :nth-child

• :nth-last-child

• :nth-of-type

• :nth-last-of-type

• :first-child Correspond à tous les éléments racine du document

• :last-child Sélectionne les éléments qui n'ont pas d'éléments enfants et ne contiennent pas de nœuds

• :only-child 6. Sélecteur de pseudo-classe négatif

• :first-of-type

  Correspondances tout sauf Élément E en dehors de F

• :last-of-type (Partage vidéo d'apprentissage :

  Tutoriel vidéo 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!