Maison > interface Web > tutoriel CSS > Quand utiliser la classe et l'identifiant en CSS

Quand utiliser la classe et l'identifiant en CSS

青灯夜游
Libérer: 2023-01-04 09:38:55
original
3315 Les gens l'ont consulté

Lorsque le style CSS est appliqué à plusieurs éléments, utilisez class pour le définir ; lorsque le style CSS s'applique à un seul élément, utilisez id pour le définir. Raison : l'identifiant ne peut pas être répété et ne peut être utilisé qu'une seule fois. Un identifiant ne peut être utilisé que pour un seul élément d'étiquette ; la même classe peut être définie sur plusieurs éléments d'étiquette.

Quand utiliser la classe et l'identifiant en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandation du didacticiel : tutoriel vidéo CSS

En plus des sélecteurs en CSS, vous pouvez sélectionner des balises HTML prédéfinies, telles que ,

, < ;div>. Vous pouvez également choisir un identifiant ou une classe définie par l'utilisateur. La principale différence entre id et class est que id ne peut pas être répété et ne peut être utilisé qu'une seule fois. Un identifiant ne peut être utilisé que pour une seule étiquette. Les classes peuvent être réutilisées et la même classe peut être définie sur plusieurs balises. En fait, la différence entre id et class peut être vue à partir du nom id est l'identifiant et class est la classe.

Alors, quand utiliser l'identifiant et quand utiliser la classe ?

  • Lorsqu'un style CSS est utilisé pour plusieurs éléments, utilisez la classe pour le définir.

  • Lorsque le style CSS n'est appliqué qu'à un seul élément, il est défini à l'aide de l'identifiant.

Par exemple, s'il n'y a qu'une seule barre de navigation supérieure dans chaque page, vous pouvez utiliser l'identifiant pour la définir

<nav id="nav"></nav>
// 或者
<div id="nav"></div>
Copier après la connexion

Par exemple, s'il s'agit d'une liste de produits. a le même style, vous pouvez utiliser la classe pour définir

<ul id="list">
    <li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</li>
</ul>
Copier après la connexion

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal