Que sont les sélecteurs CSS3 ?

Les sélecteurs CSS3 incluent : 1. Sélecteur d'élément ; 2. Sélecteur de classe ; 3. Sélecteur d'attribut ; 5. Sélecteur de descendants ; 7. Sélection de pseudo-classe ; . Sélecteur de combinaison ; 10. Sélecteur hiérarchique ; 11. Sélecteur de relation ; 12. Pseudo-classe cible ; 14. Pseudo-classe structurée ; pseudo-classe ; 18. Pseudo-classe cible. Les sélecteurs fournissent une syntaxe plus riche et plus flexible pour sélectionner et manipuler les éléments HTML.

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

Les sélecteurs CSS3 fournissent une syntaxe plus riche et plus flexible pour sélectionner et manipuler des éléments HTML. Voici quelques sélecteurs CSS3 courants :

1. Sélecteur d'éléments : Il s'agit du sélecteur CSS le plus basique, qui sélectionne les éléments en fonction de leurs noms de balises. Par exemple, le sélecteur p sélectionnera tous les éléments du paragraphe.

2. Sélecteur de classe : Le sélecteur de classe sélectionne les éléments via leur attribut de classe. Par exemple, le sélecteur .my-class sélectionnera tous les éléments portant le nom de classe my-class.

3. Sélecteur d'ID : Le sélecteur d'ID sélectionne les éléments via leur attribut id. Par exemple, le sélecteur #my-id sélectionnera l'élément avec l'ID my-id.

4. Sélecteur d'attribut : Le sélecteur d'attribut sélectionne les éléments via leurs attributs. Par exemple, le sélecteur [type="text"] sélectionnera tous les éléments dont la valeur de l'attribut type est "text".

5. Sélecteur descendant : Le sélecteur descendant sélectionne les éléments via leur relation descendante. Par exemple, le sélecteur parent-enfant sélectionnera tous les éléments enfants sous l'élément parent.

6. Sélecteur de frères et sœurs adjacents : Le sélecteur de frères et sœurs adjacents sélectionne les éléments en fonction de leur relation entre frères et sœurs adjacents. Par exemple, le sélecteur élément + frère sélectionnera l'élément frère immédiatement après l'élément élément.

7. Sélecteur de pseudo-classe : Le sélecteur de pseudo-classe sélectionne les éléments en fonction de leur statut spécifique. Par exemple, le sélecteur :hover sélectionnera l'état lorsque la souris survole l'élément.

8. Sélecteur de pseudo-éléments : Le sélecteur de pseudo-éléments sélectionne les éléments à travers des parties spécifiques de l'élément. Par exemple, le sélecteur ::before peut insérer un pseudo-élément avant le contenu de l'élément sélectionné.

9. Sélecteur combiné : Le sélecteur combiné est utilisé pour combiner plusieurs sélecteurs afin de positionner et de sélectionner des éléments avec plus de précision. Par exemple, le sélecteur element>child sélectionnera l'enfant direct de l'élément element.

10. Sélecteur hiérarchique : Le sélecteur hiérarchique est utilisé pour sélectionner des éléments en fonction de leur relation hiérarchique. Par exemple, le sélecteur :first-child sélectionnera le premier élément enfant de chaque élément.

11. Sélecteur de relation : Le sélecteur de relation est utilisé pour sélectionner des éléments en fonction de la relation entre les éléments. Par exemple, le sélecteur :nth-child(n) sélectionnera le nième élément enfant de chaque élément.

12. Pseudo-classe négative : La pseudo-classe négative est utilisée pour exclure des éléments qui répondent à des conditions spécifiques. Par exemple, le sélecteur :not(selector) exclura les éléments sélectionnés par le sélecteur.

13. Pseudo-classe cible : La pseudo-classe cible est utilisée pour sélectionner des éléments dans un état cible spécifique. Par exemple, le sélecteur :target sélectionnera l'élément cible actuellement actif (généralement l'élément suivant le # dans l'URL).

14. Pseudo-classe de zone de saisie : La pseudo-classe de zone de saisie est utilisée pour sélectionner des éléments de zone de saisie dans un état de saisie spécifique. Par exemple, :valid et :invalid sont utilisés pour sélectionner respectivement les zones de saisie valides et invalides.

15. Pseudo-classe structurée : La pseudo-classe structurée est utilisée pour sélectionner des éléments en fonction de leur structure imbriquée. Par exemple, :first-of-type et :last-of-type sont utilisés pour sélectionner respectivement le premier et le dernier élément du même type.

16. Pseudo-classe cible : La pseudo-classe cible est utilisée pour styliser des éléments spécifiques de la page lorsque l'utilisateur interagit avec la page, comme le survol, le clic, etc. Par exemple, :hover, :active, :visited, :link, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :checked, :disabled, : activé , :selected, :valid, :invalid et ainsi de suite.

17. Pseudo-classe négative : La pseudo-classe négative est utilisée pour exclure des éléments qui répondent à des conditions spécifiques. Par exemple, :not(selector) est utilisé pour exclure les éléments sélectionnés par le sélecteur.

18. Pseudo-classe cible : La pseudo-classe cible est utilisée pour styliser des éléments spécifiques de la page lorsque l'utilisateur interagit avec la page, comme le survol, le clic, etc. Par exemple, :target est utilisé pour sélectionner l'élément cible actuellement actif (généralement l'élément après # dans l'URL).

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!