Maison > Article > interface Web > Comment appliquer des styles CSS à différents éléments portant le même nom de classe en HTML ?

Comment appliquer des styles CSS à différents éléments portant le même nom de classe en HTML ?

WBOYavant: 2023-09-13 15:45:07992parcourir

Les classes HTML sont un attribut global utilisé par les balises HTML pour spécifier une liste de classes sensibles à la casse. Ces classes sont ensuite utilisées par CSS pour appliquer des styles à des balises spécifiques avec cette classe, et par Javascript pour manipuler le comportement, l'interactivité ou le style des éléments HTML.

Méthode 1 : utilisez le sélecteur point (.)

Dans cette méthode, nous utiliserons simplement le sélecteur point (.) pour sélectionner plusieurs éléments avec le même nom de classe et leur appliquerons le même ensemble de styles en utilisant CSS.

Exemple

Dans cet exemple, nous sélectionnerons la balise "p" et la balise HTML "span" en utilisant leurs classes et leur attribuerons une couleur de texte "rouge" en utilisant CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      .sample {
         color: red;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>

Méthode 2 : utilisez la balise « p » et la balise HTML « span »

Dans cette méthode, nous utiliserons CSS pour appliquer un ensemble de styles différents aux éléments portant le même nom de classe. Pour ce faire, nous utiliserons le nom de la balise HTML suivi d'un sélecteur point (.) pour sélectionner un élément spécifique et lui donner le style CSS requis.

Exemple

Dans cet exemple, nous sélectionnerons la balise "p" et la balise HTML "span" en utilisant leurs classes et leur donnerons différentes couleurs de texte en utilisant CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to apply CSS style to the different elements having the same class name in HTML?</title>
   <style>
      p.sample {
         color: red;
      }
      span.sample {
         color: green;
      }
   </style>
</head>
<body>
   <p class="sample">This is p tag content!</p>
   <span class="sample">This is span tag content!</span>
</body>
</html>

Conclusion

Dans cet article, nous avons appris comment sélectionner des éléments HTML à partir des noms de classe et comment leur appliquer des styles CSS identiques et différents en utilisant deux méthodes différentes. Dans la première méthode, nous utilisons le sélecteur point (.) pour sélectionner plusieurs éléments avec le même nom de classe et leur appliquer le même style. Dans la deuxième méthode, nous appliquons différents styles CSS aux éléments portant le même nom de classe en utilisant le nom de la balise HTML suivi d'un sélecteur point (.).

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!

JavaScript css html 选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Pourquoi avez-vous besoin d'une documentation sur le rendu audioArticle suivant：Pourquoi avez-vous besoin d'une documentation sur le rendu audio

Articles Liés

Voir plus