Qu'est-ce qu'une pseudo-classe en HTML

En HTML, la pseudo-classe est un sélecteur utilisé pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état (glisser, cliquer, etc.), et cet état change dynamiquement en fonction du comportement de l'utilisateur. Les pseudo-classes couramment utilisées incluent ":active", ":hover", ":link", ":root", ":valid", etc.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Pseudo-classe : est utilisée pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état (glisser, cliquer, etc.). Cet état change dynamiquement en fonction du comportement de l'utilisateur.

Ma compréhension est la suivante : il n'existe pas en soi. C'est un état qui ne sera déclenché que dans des circonstances spécifiques (glisser, cliquer). Vous pouvez utiliser CSS pour modifier l'objet dans cet état.

Par exemple : lorsque l'utilisateur survole un élément spécifié, vous pouvez utiliser :hover pour décrire l'état de cet élément. Bien qu'il soit similaire au CSS général et puisse ajouter des styles aux éléments existants, il ne peut être que dans un état qui. ne peut pas être décrit par l'arborescence DOM. Ce n'est qu'ainsi que vous pouvez ajouter des styles aux éléments, c'est pourquoi ils sont appelés pseudo-classes.

Les pseudo-classes couramment utilisées sont :

•  :active sélectionne l'élément en cours d'activation (correspond à l'état spécifié)

•  :hover sélectionne l'élément survolé par la souris (correspond à l'état spécifié)

• :link Sélectionnez les éléments qui n'ont pas été visités (correspondent à l'état spécifié)

• :visited Sélectionnez les éléments qui ont été visités (correspondent à l'état spécifié)

• :first-child Sélectionnez l'élément qui est le premier élément enfant de son élément parent

• :lang(value) Sélectionne les éléments avec l'attribut lang spécifié

• :focus Sélectionne les éléments avec le focus de saisie au clavier

• :enable Sélectionne chaque élément activé

• :disable Sélectionnez Chaque élément interdit

•  : coché sélectionne chaque élément sélectionné

•  : cible sélectionne l'élément d'ancrage actuel

•  : premier de type sélectionne le premier élément qui satisfait son parent Un élément qui est un élément enfant d'un certain type

•  :last-of-type sélectionne un élément qui est le dernier élément enfant d'un certain type de son élément parent

•  :only-of-type sélectionne un élément qui est le seul élément de son élément parent Un élément qui est un élément enfant d'un certain type

• :nth-of-type(n) Sélectionne un élément qui est le nième élément enfant d'un certain type de son élément parent

• :nth -last-of-type(n ) Sélectionnez un élément d'un certain type qui vérifie qu'il est l'avant-dernier nième élément de son élément parent

• :only-child Sélectionne un élément qui vérifie qu'il est le seul élément enfant de son élément parent

• :last-child Sélectionne qui satisfait qu'il est son parent L'élément du dernier élément de l'élément

• :nth-child(n) sélectionne l'élément qui satisfait le nième élément enfant de son élément parent

• :nth-last-child(n) sélectionne l'élément qui satisfait le nième élément enfant de son élément parent L'élément qui est le nième élément enfant du dernier

• :empty sélectionne les éléments qui ont aucun élément enfant

•  : dans la plage sélectionne les éléments qui satisfont la valeur dans la plage spécifiée

•  : hors plage sélectionne la valeur Éléments qui ne sont pas dans la plage spécifiée

•  : sélection invalide éléments qui satisfont à la valeur invalide

• :valid Sélectionnez les éléments qui satisfont à la valeur valide

• :not(selector) Sélectionnez les éléments qui ne satisfont pas au sélecteur

• :optional sélectionne les éléments de formulaire qui sont facultatifs, qui c'est-à-dire qu'il n'y a pas d'attribut "obligatoire"

•  : la lecture seule sélectionne les éléments de formulaire avec "lecture seule"

•  : la lecture-écriture sélectionne les formulaires qui n'ont pas d'élément "lecture seule"

•  : racine Sélectionnez le élément racine

Recommandations associées : "Tutoriel vidéo HTML"

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!