Quels sont les sélecteurs couramment utilisés en CSS3 ?

CSS3 dispose de nombreux sélecteurs pour sélectionner et positionner les éléments HTML. Ce qui suit présentera certains sélecteurs CSS3 couramment utilisés et fournira des exemples de code correspondants.

1. Sélecteur d'éléments :
   Le sélecteur d'éléments est le sélecteur le plus basique et le plus couramment utilisé, utilisé pour sélectionner des éléments dans les documents HTML. Voici un exemple de code utilisant le sélecteur d'éléments :

   p {
     color: red;
   }

   Le code ci-dessus sélectionne tous les éléments

   et définit la couleur de leur texte sur rouge.

2. Sélecteur de classe :
   Le sélecteur de classe est utilisé pour sélectionner des éléments portant le même nom de classe. Vous devez ajouter le nom de classe correspondant à l'attribut de classe de l'élément HTML et commencer par un point "." Voici un exemple de code utilisant un sélecteur de classe :

   .highlight {
     background-color: yellow;
   }

   Le code ci-dessus sélectionne tous les éléments portant le nom de classe "highlight" et définit leur couleur d'arrière-plan sur jaune.

3. Sélecteur d'ID : 
   Le sélecteur d'ID est utilisé pour sélectionner des éléments avec le même identifiant. Vous devez ajouter l'identifiant correspondant à l'attribut id de l'élément HTML et commencer par le signe dièse "#". Voici un exemple de code utilisant le sélecteur d'ID :

   #logo {
     width: 200px;
     height: 100px;
   }

   Le code ci-dessus sélectionne l'élément avec l'identifiant "logo" et définit sa largeur à 200 px et sa hauteur à 100 px.

4. Sélecteur d'attribut :
   Le sélecteur d'attribut est utilisé pour sélectionner des éléments avec des attributs spécifiques. La sélection peut être effectuée en fonction de la présence, de la valeur, etc. des attributs. Voici des exemples de code de certains sélecteurs d'attributs courants :

   • Sélectionnez les éléments avec les attributs spécifiés :

     input[type="text"] {
     border: 1px solid black;
     }

     Le code ci-dessus signifie sélectionner tous les éléments avec un attribut de type "text" et modifier leurs bordures. Ligne noire continue de 1 px.

   • Sélectionnez les éléments qui commencent, terminent ou contiennent une certaine chaîne avec la valeur d'attribut spécifiée :

     a[href^="https"] {
     color: blue;
     }

     Le code ci-dessus signifie sélectionner tous les éléments qui ont des valeurs d'attribut href commençant par "https" et définir leur texte couleur au bleu.

5. Sélecteur de pseudo-classe :
   Le sélecteur de pseudo-classe est utilisé pour sélectionner un état ou une position spécifique d'un élément. Voici des exemples de code de certains sélecteurs de pseudo-classe couramment utilisés :

   • Sélectionnez le premier élément enfant :

     ul li:first-child {
     font-weight: bold;
     }

     Le code ci-dessus signifie que le premier élément enfant

   • et leur police est en gras.

   • Sélectionner les éléments survolés par la souris :

     a:hover {
     text-decoration: underline;
     }

     Le code ci-dessus sélectionne tous les éléments survolés par la souris et ajoute un soulignement sous leur texte.

Ci-dessus sont quelques sélecteurs et exemples de code couramment utilisés en CSS3. Choisir le sélecteur approprié peut facilement sélectionner et modifier le style des éléments HTML, améliorant ainsi l'effet et la flexibilité de 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!