Quelles sont les formes des sélecteurs CSS ?

Les formes des sélecteurs CSS sont : 1. Sélecteur d'élément ; 2. Sélecteur de classe ; 3. Sélecteur d'identifiant ; 4. Sélecteur de pseudo-classe et de pseudo-élément ; les pseudo-classes/pseudo-éléments sont utilisés en combinaison. Introduction détaillée : 1. Le sélecteur d'éléments est le sélecteur le plus basique, qui sélectionne les éléments en fonction du type d'éléments HTML ; 2. Le sélecteur de classe, qui sélectionne les éléments via les attributs de classe des éléments HTML ; l'attribut ID de l'élément HTML ; 4. Sélecteur d'attribut, etc.

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

Les sélecteurs CSS se présentent sous de nombreuses formes, chacune avec une syntaxe et des scénarios d'application différents. Voici quelques formulaires de sélection CSS courants :

1. Sélecteur d'élément : Le sélecteur d'élément est le sélecteur le plus basique, qui sélectionne les éléments en fonction du type d'élément HTML. 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 les attributs de classe des éléments HTML. Les sélecteurs de classe sont représentés par le symbole . suivi du nom de la 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 l'attribut ID des éléments HTML. Les sélecteurs d'ID sont représentés par le symbole #, suivi du nom de l'ID. L'ID est unique dans le document HTML, vous pouvez donc l'utiliser pour styliser des éléments spécifiques. 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 est utilisé pour sélectionner des éléments avec des attributs spécifiques. Voici quelques exemples de sélecteurs d'attributs couramment utilisés :

• [attribut] : sélectionne tous les éléments avec l'attribut spécifié.
• [attribute=value] : Sélectionnez tous les éléments avec l'attribut et la valeur spécifiés.
• [attribute~=value] : sélectionne tous les éléments avec la valeur d'attribut spécifiée (séparés par des espaces). Par exemple, le sélecteur a[href] sélectionnera tous les éléments de lien avec l'attribut href, et le sélecteur a[href="example.com"] sélectionnera tous les éléments de lien avec la valeur d'attribut href "example.com".

5. Sélecteurs de pseudo-classe et de pseudo-éléments : Les sélecteurs de pseudo-classe et de pseudo-éléments sont utilisés pour sélectionner des éléments ou des parties spécifiques d'éléments dans un état spécifique. Voici quelques exemples de pseudo-classes et de sélecteurs de pseudo-éléments couramment utilisés :

• :hover : sélectionne les éléments au survol de la souris.
• :actif : Sélectionnez les éléments activés par l'utilisateur.
•  : visité : sélectionnez les éléments de lien qui ont été visités par l'utilisateur.
• ::before et ::after : Insérez du contenu avant ou après le contenu de l'élément. Par exemple, le sélecteur :hover sélectionnera tous les éléments du lien au survol de la souris, et a::before { content: "text" } insérera du texte avant le contenu de tous les éléments du lien.

6. Sélecteur de combinaison : Le sélecteur de combinaison vous permet de sélectionner des éléments en fonction de leur relation avec d'autres éléments. Voici quelques exemples de sélecteurs de combinaison couramment utilisés :

• Combinateurs enfants : Deux éléments séparés par un espace, indiquant que le premier élément est un enfant direct du deuxième élément. Par exemple, le sélecteur p a sélectionnera tous les éléments de lien contenus directement dans un paragraphe.
• Combinateurs descendants : Deux éléments séparés par un espace, indiquant que le premier élément peut être n'importe quel élément descendant du deuxième élément. Par exemple, le sélecteur p a sélectionnera tous les éléments de lien contenus dans un paragraphe, quelle que soit leur profondeur.
• Combinateurs frères et sœurs adjacents : deux éléments séparés par un symbole +, indiquant que le premier élément est l'élément frère suivant du deuxième élément, et qu'ils ont le même élément parent. Par exemple, le sélecteur p + a sélectionnera tous les éléments de lien immédiatement après un paragraphe.
• Combinateurs frères généraux : deux éléments séparés par un espace, indiquant que le premier élément peut être n'importe quel élément frère du deuxième élément. Par exemple, le sélecteur p ~ a sélectionnera tous les éléments de lien qui suivent un paragraphe, quel que soit le nombre d'autres éléments frères qui les précèdent.

7. Utilisez des sélecteurs d'attributs en combinaison avec des pseudo-classes/pseudo-éléments : Vous pouvez également utiliser des sélecteurs d'attributs en conjonction avec des pseudo-classes/pseudo-éléments pour créer des règles plus complexes. Par exemple, vous pouvez utiliser :hover a[href] pour sélectionner les éléments de lien qui ont l'attribut href au survol de la souris.

Ci-dessus sont quelques formes de sélection courantes de CSS, mais en fait, CSS fournit également une syntaxe de sélection plus avancée et complexe, qui peut être appliquée de manière flexible en fonction de besoins spécifiques.

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!