Comment utiliser les sélecteurs d'identifiant et de classe en CSS

J'utilise souvent id et class pour spécifier la portée du style appliqué. Cependant, il est difficile de déterminer s'il faut utiliser correctement l'identifiant ou la classe. Dans cet article, nous présenterons l'utilisation de l'identifiant et de la classe.

La différence entre l'identifiant et la classe

l'identifiant est unique, et il peut y avoir plusieurs classes

Un seul identifiant peut être écrit dans la page, mais plusieurs identifiants peuvent être écrits pour la classe.

Cependant, cela ne signifie pas que vous devez utiliser l'identifiant si la page n'en affiche qu'un. Il existe des restrictions sur l'utilisation des identifiants.

S'il y a un conflit de style entre l'identifiant et la classe, l'identifiant est prioritaire

Prenons un exemple pour le voir.

HTML

<p id="red" class="blue">ID和class优先级比较——文字颜色</p>

CSS

#red{
color:red;
}
.blue{
color:blue;
}

L'effet est le suivant :

Comme indiqué ci-dessus, la police est rouge car la priorité de l'identifiant est supérieure à la priorité de la classe, donc la couleur finale affichée est le rouge.

Vous pouvez accéder à l'identifiant dans la page

En créant un lien vers l'identifiant, vous pouvez accéder à l'emplacement de l'identifiant correspondant.

<a name="#ananker name">跳转到id </a>

J'utilise souvent ceci pour définir la fonction de saut au début de la page.

Où puis-je utiliser l'identifiant

Tout d'abord, en tant que prémisse majeure, il n'y a aucune restriction sur l'utilisation de la classe, mais il y a des restrictions sur identifiant.

Franchement, cela peut souvent être fait, même si vous le décrivez avec une classe sans utiliser d'identifiant, il n'y a pas de problème. Par conséquent, au lieu de réfléchir à la manière de distinguer l'utilisation, il vaut mieux réfléchir. où utiliser l'identifiant.

L'endroit où l'identification est utilisée est "le seul" ou "le meilleur".

Lorsque vous souhaitez ajouter la fonction de saut dans la page

Lorsque vous utilisez la fonction de saut dans la page, veuillez utiliser id car elle ne peut pas être implémentée avec la classe.

est utilisé là où "seulement" peut être défini.

Fondamentalement, il n'y a qu'une seule partie de page dans la page, comme le titre, le contenu, la barre latérale, le pied de page. Ce genre de chose est plus facile à mettre en œuvre en utilisant ID.

Résumez les parties communes de la classe et utilisez id pour remplacer le style

Il s'agit d'une spécification utilisant CSS, où id a priorité sur la classe.

Les pages Web ont une certaine mise en page basée sur la page, mais il existe de nombreuses parties similaires. Vous pouvez compresser votre CSS en écrivant des styles standards sous forme de classes et en utilisant des identifiants pour écrire les parties caractéristiques de chaque page.

Le processus de correspondance du sélecteur de l'identifiant est plus rapide

Lorsque vous utilisez jQuery, etc. pour effectuer le traitement de correspondance du sélecteur, il est plus rapide lors de la spécification de l'identifiant. En effet, s'il est spécifié par id, sa recherche dans la page peut terminer le traitement, tandis que s'il s'agit d'une classe, elle doit être analysée jusqu'à la fin.

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!