Maison  >  Article  >  interface Web  >  Quelles sont les pseudo-classes en CSS

Quelles sont les pseudo-classes en CSS

青灯夜游
青灯夜游original
2021-07-22 16:18:029274parcourir

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

Quelles sont les pseudo-classes en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn