Explorez plusieurs sélecteurs en CSS

CSS est un langage utilisé pour ajouter du style et de la mise en page aux sites Web. En CSS, les sélecteurs sont utilisés pour sélectionner les éléments HTML à styliser afin que le style puisse leur être appliqué. Les sélecteurs sont très flexibles et peuvent sélectionner des éléments en fonction des attributs de balise, de la classe, de l'identifiant, de la position, etc.

Dans cet article, nous explorerons plusieurs sélecteurs en CSS et leur utilisation.

1. Sélecteur de balises

Le sélecteur de balises est l'un des sélecteurs les plus basiques en CSS. Il sélectionne les éléments par type de balise. Par exemple, si vous souhaitez appliquer un style à tous les éléments de paragraphe, vous pouvez utiliser le code suivant :

 p {
   color: red;
   font-size: 20px;
 }

Ce code change la couleur du texte de tous les éléments de paragraphe en rouge et définit la taille de la police à 20 pixels.

2. Sélecteur de classe

Le sélecteur de classe est l'un des sélecteurs les plus couramment utilisés en CSS. Il vous permet de sélectionner des éléments en fonction de leur nom de classe. Par exemple, si vous souhaitez appliquer un style à tous les éléments portant le nom de classe « header », vous pouvez utiliser le code suivant :

 .header {
   background-color: blue;
   color: white;
   padding: 20px;
 }

Ce code change la couleur d'arrière-plan de l'élément portant le nom de classe « header » en bleu et le texte couleur Rendez-le blanc et ajoutez un remplissage de 20 px.

3. Sélecteur d'ID

Le sélecteur d'ID est un sélecteur utilisé pour sélectionner des éléments avec un identifiant unique. Si vous avez un élément avec un ID unique et que vous souhaitez lui appliquer un style, utilisez le code suivant :

 #myElement {
   border: 1px solid black;
   padding: 10px;
 }

Ce code définit la bordure de l'élément avec l'ID 'myElement' en noir et ajoute 10 pixels de remplissage.

4. Sélecteur d'attribut

Le sélecteur d'attribut est un moyen de sélectionner la valeur d'attribut d'un élément. Par exemple, si vous souhaitez sélectionner tous les éléments contenant l'attribut title, vous pouvez utiliser le code suivant :

 [title] {
   border: 1px solid black;
   padding: 10px;
 }

Ce code définit les bordures de tous les éléments avec l'attribut title en noir et ajoute un remplissage de 10 pixels.

5. Sélecteur descendant

Le sélecteur descendant vous permet de sélectionner tous les éléments descendants d'un élément. Par exemple, si vous avez un élément div dans votre code HTML qui contient un élément de titre et un élément de paragraphe, et que vous souhaitez sélectionner tous les éléments de paragraphe au sein de l'élément div, utilisez le code suivant :

 div p {
   color: blue;
 }

Ce code sélectionnera tous les éléments de paragraphe. dans l'élément div La couleur du texte de l'élément passe au bleu.

6. Sélecteur d'enfant

Le sélecteur d'enfant vous permet de sélectionner un enfant direct d'un élément spécifié. Par exemple, si vous avez un élément div qui contient un élément h1 et un élément ul, et que vous souhaitez sélectionner l'élément h1 qui est un enfant direct de l'élément div, utilisez le code suivant :

 div > h1 {
   font-size: 24px;
 }

Ce code sélectionnera l'élément div. Élément h1 qui est un enfant direct de l'élément div La taille de police de l'élément est définie sur 24 pixels.

Résumé

Ci-dessus sont plusieurs sélecteurs courants en CSS. Les sélecteurs sont une fonctionnalité très puissante de CSS qui aide les développeurs à appliquer facilement des styles aux éléments HTML. La connaissance de ces sélecteurs est cruciale pour créer de beaux sites Web. J'espère que cet article vous sera utile, merci d'avoir lu !

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!