Maison > Article > interface Web > Quelle est la différence entre le sélecteur d'identifiant et le sélecteur de classe en CSS

Quelle est la différence entre le sélecteur d'identifiant et le sélecteur de classe en CSS

奋力向前original: 2021-07-09 10:53:406707parcourir

Article précédent"Qu'est-ce que la syntaxe CSS ?" Introduction détaillée aux méthodes et règles d'utilisation》Introduction aux méthodes d'utilisation et aux règles de la syntaxe CSS. L'article suivant vous amènera à comprendre le sélecteur d'identifiant et le sélecteur de classe en CSS et à présenter leurs différences. Venez apprendre ensemble ! !

Introduction au sélecteur d'identifiant et au sélecteur de classe

Le contrôle du style des éléments HTML en CSS se fait via les sélecteurs CSS. Les deux sélecteurs les plus couramment utilisés sont le sélecteur d'identifiant et le sélecteur de classe.

1. sélecteur d'identifiant

Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués d'un identifiant spécifique.

1, le sélecteur d'identifiant est défini par "#" et commence par #

1) le sélecteur d'identifiant est défini par "#"

Les deux sélecteurs d'identifiant suivants, le premier La couleur du le premier élément pouvant être défini est rouge, et la couleur du deuxième élément défini est verte :

#red {color:red;}
#green {color:green;}

Dans le code HTML ci-dessous, l'élément p avec l'attribut id red est affiché en rouge, et l'élément p avec l'attribut id le vert s'affiche en vert :

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

2) Le sélecteur d'identifiant commence par #

Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués d'un identifiant spécifique.

Les éléments HTML utilisent l'attribut id pour définir le sélecteur d'identifiant, et le sélecteur d'identifiant en CSS est défini avec "#".

Par exemple :

1. #para1
2. {
3. text-align:center;
4. color:red;
5. }

2. Sélecteur de classe

1. Le sélecteur de classe est affiché avec un point "."

Le sélecteur de classe est utilisé pour décrire un ensemble Style d'éléments, le sélecteur de classe est différent du sélecteur d'identifiant, la classe peut être utilisée dans plusieurs éléments. Le sélecteur de classe

est représenté par l'attribut class en HTML, et en CSS, le sélecteur de classe est affiché avec un point ".".

Par exemple :

Dans l'exemple suivant, tous les éléments HTML avec la classe center sont centrés.

<html>
<head>
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Rendu :

Quelle est la différence entre le sélecteur didentifiant et le sélecteur de classe en CSS

Vous pouvez également spécifier des éléments HTML spécifiques à l'aide de classes.

Par exemple :

Dans l'exemple suivant, tous les éléments p sont utilisés pour centrer le texte de cet élément.

<html>
<head>
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

Rendu :

Le sélecteur de classe peut être utilisé par plusieurs éléments HTML, car l'attribut de classe de l'élément n'est pas nécessaire pour garantir l'unicité. Un autre élément HTML peut également avoir plusieurs valeurs d'attribut de classe, et les valeurs sont séparées par des symboles ",". Comme <p class="cls1,cls2"></p>, c'est ok. La différence la plus fondamentale entre

id et class

id doit être précédée du symbole de préfixe "#", tandis que la classe doit être précédée du symbole de préfixe ".".
L'attribut id ne peut généralement être utilisé qu'une seule fois dans une page, tandis que la classe peut être référencée plusieurs fois.
id est utilisé comme balise d'un élément pour distinguer différentes structures et contenus, tandis que class est un style qui peut être appliqué à n'importe quelle structure et contenu.
En termes d'idées de mise en page, nous adhérons généralement à ce principe : id détermine d'abord la structure et le contenu de la page, puis définit un style pour celle-ci : au contraire, class définit d'abord un type de style, puis l'ajoute à la page selon les besoins. Appliquez des styles de classe à différents éléments et contenus.
Actuellement, les navigateurs permettent à plusieurs identifiants avec la même valeur d'attribut d'apparaître sur la même page. Dans des circonstances normales, ils peuvent être affichés normalement. Cependant, lors de l'utilisation de JavaScript pour contrôler des éléments via des identifiants, des erreurs se produiront.
Dans les applications pratiques, les classes sont plus souvent utilisées dans les sections de texte et les modifications de pages, tandis que les identifiants sont plus souvent utilisés pour implémenter de grandes mises en page et une conception contenant des blocs, ou des styles de boîtes contenantes

Résumé : En CSS, l'identifiant le sélecteur et le sélecteur de classe sont utilisés pour ajouter de la couleur aux éléments. Ils rendent toute notre page colorée.

Notes

Les attributs ID ne commencent pas par un chiffre. Les identifiants commençant par des chiffres ne fonctionnent pas dans les navigateurs Mozilla/Firefox
L'attribut ID ne peut apparaître qu'une seule fois dans chaque document HTML
Le premier. Le caractère du sélecteur de classe ne peut pas utiliser de chiffres ! Cela ne fonctionne pas dans Mozilla ou Firefox
Attention

Apprentissage recommandé : Tutoriel vidéo 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez étape par étape à utiliser CSS pour personnaliser de superbes styles de barre de défilement !Article suivant：Apprenez étape par étape à utiliser CSS pour personnaliser de superbes styles de barre de défilement !

Articles Liés

Voir plus