Maison >interface Web >tutoriel CSS >Quelle est la priorité du sélecteur CSS
La priorité du sélecteur CSS est déterminée dans l'ordre suivant : Spécialité (ID > Classe > Type > Wildcard) Ordre source (en ligne > Feuille de style interne > Feuille de style externe > Feuille de style de l'agent utilisateur) Ordre de déclaration (les déclarations ultérieures sont prioritaires ) Importance (!important force une priorité plus élevée)
Priorité du sélecteur CSS
La priorité du sélecteur CSS détermine lequel est sélectionné lorsque plusieurs sélecteurs sont appliqués à un périphérique d'élément qui sera utilisé. Un sélecteur avec une priorité plus élevée remplacera un sélecteur du même type avec une priorité plus faible.
La priorité du sélecteur CSS est déterminée par les quatre aspects suivants, classés de haut en bas :
1 Spécificité
La spécificité est déterminée par le nombre et la position des types de sélecteur utilisés dans le sélecteur. Les types de sélecteurs suivants ont une spécificité croissante :
2.
Si deux sélecteurs sont de même spécificité, celui issu de la source la plus spécifique est prioritaire. L'ordre des sources est :
Ordre de déclaration
Si la spécificité et l'ordre des sources des deux sélecteurs sont les mêmes. , la déclaration écrite plus tard dans le document CSS a une priorité plus élevée.
4. Le mot-clé Importance
!important
peut forcer l'augmentation de la priorité du sélecteur. Cependant, son utilisation doit être évitée car elle brise la maintenabilité du CSS. !important
关键字可以强制提高选择器的优先级。然而,它的使用应避免,因为它会破坏 CSS 的可维护性。
示例:
以下示例说明了优先级的应用:
<code class="css">#primary { color: red; } .bold { color: blue; } p { color: green; } body { color: black; } p.bold { color: purple !important; }</code>
在上面的示例中,p.bold
的特殊性为 2(类型选择器 + 类选择器),并且声明中包含 !important
,因此具有最高的优先级。因此,对于具有 p.bold
类的段落,p.bold
的样式(紫色)将被应用,而不是 #primary
(特殊性为 1)、.bold
(特殊性为 1)或 p
p.bold
a une spécificité de 2 (sélecteur de type + sélecteur de classe), et le La déclaration contient !important
, elle a donc la priorité la plus élevée. Ainsi, pour un paragraphe de classe p.bold
, le style (violet) de p.bold
sera appliqué à la place de #primary
(spécial style avec une spécificité de 1), .bold
(spécificité de 1), ou p
(spécificité de 0). 🎜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!