Quels sont les sélecteurs de sources CSS ?

Les sélecteurs de source CSS incluent le sélecteur d'élément, le sélecteur de classe, le sélecteur d'ID, le sélecteur d'attribut, le sélecteur de pseudo-classe, le sélecteur de pseudo-élément, le sélecteur de descendant, le sélecteur d'élément enfant, le sélecteur de frère adjacent et les sélecteurs universels, etc. Introduction détaillée : 1. Sélecteur d'élément, utilisez le nom de l'élément comme sélecteur, sélectionnez tous les éléments du document qui correspondent au nom de l'élément 2. Sélecteur de classe, utilisez le nom de la classe comme sélecteur, sélectionnez tous les éléments avec le même nom de classe dans ; le document, le nom de la classe commence par un point ; 3. Sélecteur d'ID, utilisant l'ID unique de l'élément comme sélecteur, etc.

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

CSS (Cascading Style Sheets) est un langage utilisé pour décrire le style des pages Web, qui peut contrôler l'apparence et la disposition des éléments dans les pages Web. En CSS, les sélecteurs sont utilisés pour sélectionner les éléments auxquels les styles doivent être appliqués. Les sélecteurs CSS peuvent être divisés en deux types : les sélecteurs natifs et les sélecteurs personnalisés. Cet article se concentrera sur les sélecteurs bruts de CSS.

1. Sélecteur d'élément : utilisez le nom de l'élément comme sélecteur pour sélectionner tous les éléments du document qui correspondent au nom de l'élément. Par exemple, le sélecteur p sélectionnera tous les éléments du paragraphe.

2. Sélecteur de classe : utilisez le nom de la classe comme sélecteur pour sélectionner tous les éléments portant le même nom de classe dans le document. Les noms de classe commencent par un point (.). Par exemple, le sélecteur .red sélectionnera tous les éléments dont le nom de classe est rouge.

3. Sélecteur d'ID : utilisez l'ID unique de l'élément comme sélecteur pour sélectionner l'élément avec l'ID correspondant dans le document. Les identifiants commencent par le signe dièse (#). Par exemple, le sélecteur #header sélectionnera l'élément avec l'en-tête ID.

4. Sélecteur d'attributs : utilisez les attributs des éléments comme sélecteurs pour sélectionner les éléments avec les attributs correspondants dans le document. Il existe de nombreuses formes de sélecteurs d'attributs, notamment le sélecteur [attribute] (sélection d'éléments avec des attributs spécifiés), les sélecteurs [attribute=value] (sélection d'éléments avec des attributs et des valeurs spécifiés), etc.

5. Sélecteur de pseudo-classe : utilisez l'état spécifique d'un élément comme sélecteur pour sélectionner des éléments avec l'état correspondant dans le document. Les sélecteurs de pseudo-classe commencent par deux points (:). Par exemple, le sélecteur :hover sélectionnera l'état lorsque la souris survole l'élément.

6. Sélecteur de pseudo-éléments : utilisez une partie spécifique d'un élément comme sélecteur pour sélectionner des éléments avec des parties correspondantes dans le document. Les sélecteurs de pseudo-éléments commencent par un double deux-points (::). Par exemple, le sélecteur ::before sélectionnera le contenu inséré avant l'élément.

7. Sélecteur descendant : utilisez deux sélecteurs séparés par des espaces pour sélectionner les éléments du document qui correspondent au deuxième sélecteur et sont les descendants du premier sélecteur. Par exemple, le sélecteur div p sélectionnera tous les éléments de paragraphe dans un élément div.

8. Sélecteur enfant : utilisez deux sélecteurs séparés par un signe supérieur à (>) pour sélectionner les éléments du document qui correspondent au deuxième sélecteur, et l'élément est un descendant direct du premier élément enfant. Par exemple, le sélecteur div > p sélectionnera les éléments de paragraphe qui sont des enfants directs de tous les éléments div.

9. Sélecteur de frères et sœurs adjacents : utilisez deux sélecteurs séparés par un signe plus (+) pour sélectionner les éléments du document qui correspondent au deuxième sélecteur, et l'élément suit immédiatement la première sélection derrière l'appareil. Par exemple, le sélecteur h1 + p sélectionnera l'élément de paragraphe qui suit immédiatement l'élément h1.

10. Sélecteur universel : utilisez l'astérisque (*) comme sélecteur pour sélectionner tous les éléments du document. Les sélecteurs universels peuvent être combinés avec d'autres sélecteurs pour sélectionner des éléments spécifiques.

Ce qui précède présente les principaux types de sélecteurs de sources CSS. En utilisant rationnellement les sélecteurs, vous pouvez sélectionner et contrôler avec précision les styles d'éléments dans les pages Web, obtenant ainsi des effets de page riches et diversifiés.

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!