Que sont les sélecteurs de pseudo-classe ?

Les sélecteurs de pseudo-classes incluent :hover, :active, :focus, :visited, :link, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :ntième-de-type(n), :ntième-dernier-de-type(n), :not(sélecteur), :empty, :checked, :disabled, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le sélecteur de pseudo-classe est un puissant sélecteur en CSS, utilisé pour sélectionner des états ou des conditions spécifiques d'éléments. Les sélecteurs de pseudo-classe commencent par deux points (:) et sont utilisés pour sélectionner différents états d'élément, tels que le survol de la souris, les liens visités, la position de l'élément, etc. Voici les sélecteurs de pseudo-classe courants en CSS :

1 :hover : Sélectionnez l'état lorsque la souris survole l'élément. Des styles spécifiques peuvent être appliqués aux éléments lorsque le pointeur de la souris les survole.

2. :active : Sélectionnez l'état dans lequel l'élément est activé ou enfoncé. Des styles spécifiques peuvent être appliqués aux éléments lorsque l'utilisateur clique ou appuie sur le bouton de la souris.

3. :focus : Sélectionnez l'élément qui reçoit actuellement le focus. Des styles spécifiques peuvent être appliqués aux éléments lorsqu'ils sont sélectionnés ou ont le focus.

4. :visité : Sélectionnez le lien visité. Lorsqu'un utilisateur a visité un lien, vous pouvez appliquer des styles spécifiques au lien.

5. :link : Sélectionnez un lien non visité. Correspond à la pseudo-classe :visited, utilisée pour sélectionner les liens non visités.

6. :first-child : Sélectionnez le premier élément enfant de l'élément. Des styles spécifiques peuvent être appliqués à un élément lorsqu'il est le premier enfant de son élément parent.

7. :last-child : Sélectionnez le dernier élément enfant de l'élément. Des styles spécifiques peuvent être appliqués à un élément lorsqu'il s'agit du dernier enfant de son parent.

8. :nth-child(n) : Sélectionnez le nième élément enfant de l'élément. Un style spécifique peut être appliqué à un élément lorsqu'il est le nième enfant de son parent. Où n peut être un nombre spécifique, un mot-clé (comme pair, impair) ou une expression (comme 2n, 3n+1).

9. :nth-last-child(n) : Sélectionnez le nième élément enfant du dernier élément. Un style spécifique peut être appliqué à un élément lorsqu'il s'agit du n-ème enfant à partir du bas de son parent.

10. :nth-of-type(n) : Sélectionnez le nième élément parmi les éléments du même type. Un style spécifique peut être appliqué à un élément lorsqu'il s'agit du nième élément de son type.

11. :nth-last-of-type(n) : Sélectionnez le nième élément parmi le dernier parmi les éléments du même type. Vous pouvez appliquer un style spécifique à un élément lorsqu'il s'agit du nième élément du dernier de son type.

12. :not(selector) : Sélectionnez les éléments qui ne correspondent pas à un sélecteur spécifique. Vous pouvez utiliser ce pseudo-sélecteur pour exclure des éléments spécifiques et sélectionner d'autres éléments auxquels appliquer des styles.

13. :vide : Sélectionnez les éléments sans éléments enfants. Des styles spécifiques peuvent être appliqués à un élément lorsqu'il n'a aucun élément enfant.

14. :checked : Sélectionnez l'élément de formulaire sélectionné. S'applique aux éléments de formulaire tels que les cases à cocher, les boutons radio et les listes déroulantes.

15. :disabled : Sélectionnez les éléments de formulaire désactivés. Lorsqu'un élément de formulaire est désactivé, des styles spécifiques peuvent être appliqués à l'élément.

Les sélecteurs de pseudo-classe ci-dessus sont courants en CSS. Ils peuvent sélectionner et styliser des éléments dans des pages Web en fonction de l'état ou des conditions des éléments. En utilisant rationnellement ces sélecteurs de pseudo-classes, nous pouvons obtenir des effets riches et diversifiés et améliorer l'expérience utilisateur et la lisibilité des pages.

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!