Annuaire d'articles
Sélecteur d'identifiant CSS
Le sélecteur d'identifiant CSS commence par "#" et est utilisé pour sélectionner des éléments HTML avec des attributs d'identifiant spécifiques.
Dans les documents HTML, chaque identifiant doit être globalement unique, c'est-à-dire que chaque identifiant ne peut être utilisé que pour un seul élément. Par conséquent, en CSS, le sélecteur d'identifiant a une priorité plus élevée que le sélecteur de classe et le sélecteur de balise.
Utilisez le sélecteur d'identifiant pour localiser et sélectionner rapidement des éléments spécifiques et leur appliquer des styles. Par exemple, voici un exemple d'utilisation d'un sélecteur d'identifiant pour définir la couleur d'un élément :
#myid {
color: blue;
}
En HTML, utilisez l'attribut id pour spécifier l'identifiant d'un élément, par exemple :
<p id="myid">This text will be blue.</p>
Dans cet exemple, #myidc'est le sélecteur d'identifiant CSS qui sélectionne l'élément HTML portant l'identifiant "myid" et définit la couleur de son texte sur bleu.
Dans les mises en page modernes, les sélecteurs d'identifiant sont souvent utilisés pour créer des sélecteurs dérivés, qui sélectionnent les éléments en fonction de leur hiérarchie. Par exemple, le style suivant ne s'appliquera qu'aux paragraphes qui apparaissent dans un élément avec l'identifiant sidebar :
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
Dans cet exemple, #sidebar pun sélecteur dérivé qui sélectionne tous les paragraphes de l'élément avec l'identifiant "sidebar" et définit son style de police sur italique, l'alignement du texte à droite et sa marge supérieure sur 0,5em.
Exemple
Voici un exemple de fichier HTML contenant des styles utilisant le sélecteur d'identifiant CSS :
<!DOCTYPE html>
<html>
<head>
<title>CSS ID Selector Example</title>
<style>
#myid {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p id="myid">This is a paragraph.</p>
</body>
</html>
L'effet est le suivant :
Dans cet exemple, nous <style>avons défini un sélecteur d'identifiant dans la balise #myidqui sélectionnera l'élément HTML avec l'identifiant "myid" et définira la couleur de son texte sur bleu. Dans <body>la balise, nous utilisons <p id="myid">pour spécifier l'identifiant d'un paragraphe comme "myid", donc la couleur du texte de ce paragraphe sera définie sur bleu.
Sélecteur de classe CSS
Le sélecteur de classe CSS est utilisé pour décrire le style d'un groupe d'éléments pouvant avoir la même valeur de classe. En HTML, l'attribut class est utilisé pour spécifier la valeur de classe d'un élément, tandis qu'en CSS, le sélecteur de classe est représenté par un symbole point (.).
À l'aide du sélecteur de classe, vous pouvez ajouter le même style à un groupe d'éléments. Par exemple, le code suivant définit tous les éléments HTML avec la classe center sur un alignement centré :
.center {
text-align: center;
}
En HTML, vous pouvez <h1 class="center">spécifier un élément de titre aligné au centre en utilisant :
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Class Selector Example</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Title</h1>
<p class="center">This is a centered paragraph.</p>
</body>
</html>
L'effet est le suivant :
Dans cet exemple, <h1 class="center">spécifiez <p class="center">respectivement un titre et un élément de paragraphe, et appliquez le style d'alignement central.
Différences et similitudes entre l'identifiant CSS et la classe
Les différences et similitudes entre le sélecteur d'identifiant CSS et le sélecteur de classe sont les suivantes :
-
la différence:
- Nombre d'applications : Dans un document HTML, le sélecteur d'identifiant ne peut être référencé qu'une seule fois, tandis que le sélecteur de classe peut être référencé plusieurs fois. Cela signifie que vous pouvez attribuer un identifiant à un élément, mais pas plusieurs identifiants. En même temps, vous pouvez attribuer la même classe à plusieurs éléments.
- Scénarios d'utilisation : si vous devez sélectionner de manière unique des éléments dans une page, ou si vous devez créer des associations fortes pour les éléments en CSS et JS, vous devez utiliser le sélecteur d'identifiant. Par exemple, si vous souhaitez manipuler directement un élément spécifique en JavaScript, utiliser un identifiant est un meilleur choix. Si vous devez classer et sélectionner des éléments avec le même style, ou si vous souhaitez implémenter des styles hautement prioritaires, vous devez utiliser le sélecteur de classe. Par exemple, si vous souhaitez que tout le texte du paragraphe soit bleu, vous pouvez appliquer la classe à tous les paragraphes qui doivent changer de couleur.
-
Même point :
- Qu'il s'agisse d'un sélecteur d'identifiant ou d'un sélecteur de classe, ils sont tous deux un type de sélecteur CSS, utilisé pour spécifier les éléments HTML auxquels les styles sont appliqués.
- Qu'il s'agisse d'un identifiant ou d'une classe, ils peuvent exister dans les éléments HTML via des attributs et sont utilisés pour spécifier le style de l'élément.
En général, id et class sont des concepts CSS importants. Ils peuvent tous deux être utilisés pour spécifier le style des éléments HTML, mais il existe des différences évidentes dans leurs temps d'utilisation et leurs scénarios d'application.