Quelle est la différence entre class et id lors de l'étiquetage des éléments HTML ?

Cette fois, je vais vous présenter la différence entre la classe et l'identifiant lors de l'étiquetage des éléments HTML Quelles sont les précautions lors de l'étiquetage des éléments HTML. Ce qui suit est un cas pratique. jetez un oeil.

Il existe des structures HTML très complexes dans les pages Web. Si nous utilisons CSS pour définir des styles associés, nous devons spécifier les indicateurs correspondants pour ces structures, puis écrire les sélecteurs CSS correspondants pour obtenir leurs styles. Les deux attributs d'annotation les plus couramment utilisés sont id et class, par exemple :

<div class=”header” id=”header” ></div>

Il existe désormais davantage de méthodes de sélection, telles que : Sélecteur d'attribut, etc. Cependant, il n'est pas recommandé de l'utiliser. Bien que l'identifiant et la classe puissent être omis à l'aide du sélecteur d'attribut, il existe des problèmes tels que des inconvénients lors de la maintenance ultérieure, une mauvaise compatibilité avec les premiers navigateurs et une altération de l'efficacité du rendu du navigateur. Ainsi, bien qu'il existe plus d'options, je recommande toujours d'utiliser l'identifiant et la classe ainsi que le nom de l'élément pour construire des sélecteurs CSS.
Étant donné que l'identifiant et la classe peuvent marquer les structures HTML, que dois-je choisir d'utiliser en premier ? C’est ce dont discutera cet article.

La différence entre l'identifiant et la classe

Les amis expérimentés peuvent ignorer cette partie.

1. Unicité et répétabilité

l'identifiant ne peut être unique que dans la structure de la page Web. Si vous spécifiez l'identifiant d'un élément comme aa, un autre identifiant ne peut pas apparaître dans la page Web. Élément HTML pour aa. Bien que les navigateurs puissants prennent en charge plusieurs identifiants en double et attribuent les styles correspondants, cela n'est pas autorisé par la norme.

Au contraire, la classe peut être réutilisée dans la structure de la page Web. Vous spécifiez la classe d'un élément comme bb, et vous pouvez spécifier la classe de l'élément suivant comme bb. Ces deux éléments peuvent être appliqués avec. bb en même temps. De plus, vous pouvez également spécifier plusieurs valeurs d'attribut de classe pour un élément, afin d'obtenir les styles de plusieurs attributs en même temps.

2. La priorité est différente en CSS

Dans le sélecteur CSS, la priorité d'application des styles à l'identifiant et à la classe est différente. La priorité de style de l'identifiant est supérieure à la priorité de style de la classe. Si je spécifie le style suivant pour un div avec l'identifiant aa et la classe bb :

#aa{background:red;}   
.bb{background:blue;}

alors le navigateur affichera un fond rouge.

3. Fonction de saut

L'utilisation de l'attribut id peut augmenter la fonction de saut de la balise d'ancrage Si nous spécifions l'identifiant comme aa pour un div dans la page, alors nous y serons. l'URL actuelle, ajoutez #aa après, et la page passera immédiatement à l'emplacement du div avec l'ID aa. Par exemple : saut de chapitre de l’Encyclopédie Baidu. La classe n'a pas cette fonction.

Pourquoi utiliser la classe au lieu de l'identifiant

Quels sont les avantages d'utiliser la classe ?

1. Réduire la dénomination

Nommer des structures complexes est vraiment une chose gênante si j'utilise id pour étiqueter, alors je dois donner un nom à chaque structure. Dans les pages Web, il existe de nombreuses structures avec le même style et le même effet (par exemple : style de bouton unifié), nous écrivons donc simplement un style de classe commun, puis attribuons cette classe à toutes les structures qui nécessitent le même style.

2. La classe

hautement réutilisable peut être réutilisée dans d'autres structures, et plusieurs classes peuvent être appliquées à un certain élément, de sorte qu'un certain style de classe puisse être hautement réutilisé. Une application pratique plus extrême est celle des classes atomiques, par exemple :

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

Écrivez certaines classes aussi petites et concises que possible, puis écrivez directement pour un élément qui nécessite ce style (par exemple : le float ci-dessus) classe (par exemple : class="fl").
Pour les applications générales, pour certaines structures qui nécessitent le même style, il vous suffit d'écrire un style, puis d'attribuer la même classe à ces structures. Cela permet d'obtenir un degré élevé de réutilisation du code de style et est plus pratique à modifier. .

3. Faible priorité

La priorité de la classe est supérieure au nom de l'élément et inférieure à l'identifiant. La fonctionnalité de faible priorité peut faciliter le débogage et la couverture du style.

Si nous avons déjà utilisé id pour marquer un élément et que nous souhaitons modifier le style de cet élément, nous pouvons uniquement modifier le code de style CSS correspondant ou utiliser la syntaxe d'accentuation !important pour qu'un certain style écrase le style original.

Si l'élément est marqué avec une classe, nous ajoutons directement un identifiant à l'élément, puis construisons un sélecteur CSS pour l'identifiant de l'élément afin de le modifier et de l'écraser.

C'est précisément à cause de ces caractéristiques que vous devriez essayer d'utiliser la classe pour marquer des éléments afin de faciliter la maintenance ultérieure.

4.id est également un must.

la classe n'est pas omnipotente. Il y a de nombreux endroits où nous devons utiliser id pour marquer en même temps.

5. Saut de balise d'ancrage

Si vous souhaitez utiliser des balises d'ancrage pour sauter sur la page, vous ne pouvez spécifier que l'identifiant d'une certaine cible de saut, car la classe peut être réutilisée plusieurs fois, il n'a donc pas la fonction de saut.

Utilisé en entrée

Lors de l'utilisation de l'entrée, les balises d'étiquette sont généralement utilisées pour décrire la fonction de l'entrée. Il existe deux façons d'associer l'étiquette à l'entrée. L'une consiste à utiliser l'attribut for de l'étiquette. La valeur de l'attribut est la valeur id de l'entrée. L'autre consiste à envelopper l'entrée correspondante avec l'étiquette. Évidemment, la première méthode est plus flexible et meilleure, mais vous devez spécifier un attribut id pour l'entrée correspondante.

De plus, certaines exigences particulières doivent également utiliser l'identifiant, qui ne seront pas résumées ici.

La meilleure combinaison d'utilisation

Il y a eu de nombreuses critiques à l'égard de la classe auparavant, et certains ont même dit que le W3C devrait abolir la balise class. Stalker m était également un fervent utilisateur de l'attribut id, mais au cours de la pratique, j'ai découvert de plus en plus les avantages des cours et je suis passé aux cours.

Une meilleure combinaison consiste à utiliser la classe pour spécifier la plupart des éléments et des structures, et à utiliser l'annotation id pour très peu d'éléments nécessitant des fonctions spécifiques.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment rendre le contenu d'une page Web mobile adaptatif

Comment gérer le débordement de contenu dans les tableaux

Comment obtenir le nombre de mots restants dynamiques de la zone de texte

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!