Maison >interface Web >Questions et réponses frontales >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
E:link
E:visited
est utilisé pour faire correspondre les éléments en utilisant la langue spécifiée. E:active
E:hover
4. Sélecteur de pseudo-classe d'état d'élément
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
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
:last-of-type
(Partage vidéo d'apprentissage :
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!