Quels sont les sélecteurs CSS3 courants ?

CSS3 est un langage de feuille de style utilisé pour la conception Web. Il possède de riches sélecteurs qui peuvent nous aider à spécifier plus précisément les éléments HTML à styliser. Ce qui suit présentera certains sélecteurs CSS3 couramment utilisés et donnera des exemples de code correspondants.

1. Sélecteur d'éléments
   Le sélecteur d'éléments est le sélecteur le plus basique qui peut sélectionner des éléments spécifiques dans un document HTML pour le style. Par exemple, pour définir la couleur du texte de tous les éléments de paragraphe (

   ) sur rouge, vous pouvez utiliser le code suivant :

p {
    color: red;
}

2. Sélecteur de classe
   Le sélecteur de classe peut être utilisé pour sélectionner des éléments portant le même nom de classe élément. En ajoutant un attribut de classe à un élément, on peut l'associer à la règle de style correspondante. Par exemple, pour définir la couleur d'arrière-plan de tous les éléments avec la classe "class1" sur jaune, vous pouvez utiliser le code suivant :

.class1 {
    background-color: yellow;
}

3. Sélecteur d'ID (Sélecteur d'ID)
   Le sélecteur d'ID est similaire au sélecteur de classe et est utilisé pour sélectionner le élément spécifié. La différence est que le sélecteur d'ID sélectionne les éléments avec des ID uniques. En ajoutant un attribut id à un élément, on peut l'associer à la règle de style correspondante. Par exemple, pour définir la taille de police d'un élément avec "id1" à 20 pixels, vous pouvez utiliser le code suivant :

#id1 {
    font-size: 20px;
}

4. Sélecteur de pseudo-classe (Sélecteur de pseudo-classe)
   Le sélecteur de pseudo-classe peut être basé sur l'état ou la position de l'élément Sélectionnez les éléments pour les styliser différemment. Les sélecteurs de pseudo-classe couramment utilisés incluent :hover, :visited, :first-child, etc. Par exemple, pour que le texte du lien devienne rouge lorsque vous passez la souris sur tous les liens, vous pouvez utiliser le code suivant :

a:hover {
    color: red;
}

5. Sélecteur d'attribut
   Le sélecteur d'attribut sélectionne les éléments à styliser en fonction de leurs attributs. Par exemple, pour définir la couleur de bordure de toutes les images avec l'attribut "titre" sur vert, vous pouvez utiliser le code suivant :

img[title] {
    border: 1px solid green;
}

6. Sélecteur enfant
   Le sélecteur enfant peut être utilisé pour sélectionner les éléments enfants directs d'un élément. Par exemple, pour sélectionner tous les enfants directs (
7. ) dans une liste (
   ) et définir leur couleur d'arrière-plan sur bleu, vous pouvez utiliser le code suivant :

ul > li {
    background-color: blue;
}

7. Sélecteur de négation)
   Le sélecteur négatif peut supprimer les éléments spécifiés d'un ensemble d'éléments pour le style. Par exemple, pour sélectionner des éléments à l'exception de tous les éléments avec la classe "class1" et définir la couleur de leur texte sur gris, vous pouvez utiliser le code suivant :

:not(.class1) {
    color: gray;
}

Ce qui précède présente quelques sélecteurs CSS3 couramment utilisés qui peuvent nous aider à sélectionner et à styliser le HTML. éléments avec plus de précision. En appliquant ces sélecteurs de manière flexible, nous pouvons facilement obtenir divers effets dans la conception Web.

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!