Quels sont les trois sélecteurs couramment utilisés en CSS ?

Les trois sélecteurs couramment utilisés en CSS sont : 1. Sélecteur d'élément ; 2. Sélecteur de classe 3. Sélecteur d'ID ; Introduction détaillée : 1. Le sélecteur d'éléments, qui est le sélecteur le plus basique. Il sélectionne les éléments en fonction du nom de balise des éléments HTML ; 2. Le sélecteur de classe, utilise "." caractère alphanumérique, mais il doit commencer par une lettre ; 3. Sélecteur d'ID, utilisez "#" pour sélectionner les éléments avec un ID spécifique. L'ID doit être unique, c'est-à-dire que chaque ID ne peut correspondre qu'à un seul élément, etc.

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

Trois sélecteurs couramment utilisés en CSS incluent :

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

p {  
  color: red;  
}

Le style ci-dessus définira la couleur du texte de tous les éléments

de la page sur rouge.

2. Sélecteur de classe : Le sélecteur de classe utilise . Le nom de la classe peut être n'importe quel caractère alphanumérique, mais doit commencer par une lettre. Par exemple, le sélecteur .my-class sélectionnera tous les éléments avec la classe my-class.

.my-class {  
  background-color: yellow;  
}

Le style ci-dessus définira la couleur d'arrière-plan de tous les éléments avec ma classe sur jaune.

3. Sélecteur d'ID : Le sélecteur d'ID utilise # pour sélectionner des éléments avec un ID spécifique. Les identifiants doivent être uniques, c'est-à-dire que chaque identifiant ne peut correspondre qu'à un seul élément. Par exemple, le sélecteur #my-id sélectionnera l'élément avec l'ID my-id.

#my-id {  
  font-size: 20px;  
}

Le style ci-dessus définira la taille de la police de l'élément avec l'ID my-id à 20 pixels.

Ces trois sélecteurs sont les plus couramment utilisés en CSS. Ils peuvent être utilisés seuls ou en combinaison pour réaliser une sélection et un style plus complexes.

En plus des trois sélecteurs couramment utilisés ci-dessus, CSS propose également de nombreux autres types de sélecteurs, tels que :

1 Sélecteur d'attribut : Ce sélecteur peut sélectionner des éléments en fonction de leurs attributs et valeurs.

2. Sélecteur de pseudo-classe : Le sélecteur de pseudo-classe est utilisé pour sélectionner des éléments dans un état spécifique, tel que le survol de la souris, le clic, le focus, etc. Par exemple, le sélecteur :hover sélectionne l'élément sur lequel la souris survole.

3. Éléments enfants et sélecteurs descendants : Ces sélecteurs peuvent sélectionner des éléments enfants ou des éléments descendants d'un élément. Par exemple, div > p sélectionnera tous les enfants directs

de l'élément

, tandis que div p sélectionnera tous les éléments descendants

4. Sélecteur de groupe : Le sélecteur de groupe vous permet de sélectionner plusieurs éléments, classes ou identifiants en même temps et de leur appliquer le même style. Par exemple, le sélecteur h1, h2, p sélectionnera tous les éléments

,

et

Ces sélecteurs offrent une méthode de sélection riche, permettant aux développeurs de localiser avec précision n'importe quel élément de la page et de lui appliquer le style souhaité. Dans le même temps, comprendre et maîtriser ces sélecteurs est également la clé pour devenir un maître CSS.

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!

css html class 选择器 伪类

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn