Maîtrise de l'utilisation des sélecteurs d'attributs CSS courants

Pour maîtriser les sélecteurs d'attributs CSS courants, des exemples de code spécifiques sont nécessaires

CSS est un langage utilisé pour contrôler le style des pages Web. Il peut ajouter du style et de la mise en page aux éléments HTML. En CSS, le sélecteur d'attribut est un sélecteur très utile. Il permet de sélectionner l'élément correspondant en fonction de sa valeur d'attribut, de manière à modifier facilement son style.

Ce qui suit présentera certains sélecteurs d'attributs CSS couramment utilisés et fournira des exemples de code spécifiques.

1. Selector [type] : sélectionnez les éléments en fonction de leurs attributs de type.

Écrivez le code CSS suivant pour définir la couleur d'arrière-plan de tous les éléments de bouton de type "bouton" sur rouge :

button[type="button"] {
  background-color: red;
}

2. Selector [class] : Sélectionnez les éléments en fonction de leur attribut de classe.

Écrivez le code CSS suivant pour définir la couleur du texte de tous les éléments avec la classe "highlight" sur bleu :

.highlight {
  color: blue;
}

3. Selector [id] : Sélectionnez les éléments en fonction de leur attribut id.

Écrivez le code CSS suivant pour définir la couleur d'arrière-plan de l'élément de la barre de navigation avec l'identifiant "navbar" sur gris :

#navbar {
  background-color: gray;
}

4. Selector [attr~=value] : sélectionne les éléments avec les attributs spécifiés et dont les valeurs d'attribut contient un élément de mots spécifiques.

Écrivez le code CSS suivant pour définir la couleur du texte sur vert pour les éléments avec l'attribut "lang" et la valeur d'attribut contenant "en" :

[lang~="en"] {
  color: green;
}

5. Selector [attr^=value] : sélectionne les éléments avec l'attribut spécifié et Éléments dont les valeurs d'attribut commencent par une valeur spécifique.

Écrivez le code CSS suivant pour définir le style de police en italique pour les éléments qui ont l'attribut "data-" et dont la valeur d'attribut commence par "menu" :

[data^="menu"] {
  font-style: italic;
}

6. Selector [attr$=value] : sélectionne les éléments avec l'attribut spécifié Éléments dont les valeurs d'attribut se terminent par une valeur spécifique.

Écrivez le code CSS suivant pour définir la couleur du texte des éléments de lien avec l'attribut "href" et la valeur de l'attribut se terminant par ".pdf" en rouge :

[href$=".pdf"] {
  color: red;
}

Ce sont des sélecteurs d'attributs CSS couramment utilisés, rapides et précis. Sélectionnez l'élément spécifié et modifiez son style. En utilisant ces sélecteurs de manière flexible, nous pouvons contrôler plus facilement le style des pages Web.

J'espère que le contenu ci-dessus pourra vous aider à mieux comprendre et maîtriser l'utilisation des sélecteurs d'attributs CSS. Je vous souhaite de meilleurs résultats lorsque vous utilisez 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!