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 :

• Sélecteur d'ID (#)
• Sélecteur de classe (.)
• Sélecteur de type (html, corps, etc.)
• Wildcard (*)

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 :

• Styles en ligne
• Feuilles de style internes
• Feuilles de style externes
• Feuilles de style de l'agent utilisateur

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

🎜Exemple : 🎜🎜🎜L'exemple suivant illustre l'application des priorités : 🎜rrreee🎜Dans l'exemple ci-dessus, 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!