Was ist die CSS-Selektorpriorität?

CSS-Selektorpriorität wird in der folgenden Reihenfolge bestimmt: Spezialität (ID > Klasse > Typ > Platzhalter) Quellreihenfolge (Inline > Internes Stylesheet > Externes Stylesheet > Benutzeragenten-Stylesheet) Deklarationsreihenfolge (Spätere Deklarationen haben Vorrang ) Wichtigkeit (!important erzwingt eine höhere Priorität)

CSS-Selektorpriorität

CSS-Selektorpriorität bestimmt, welcher ausgewählt wird, wenn mehrere Selektoren auf ein Elementgerät angewendet werden. Ein Selektor mit einer höheren Priorität überschreibt einen Selektor desselben Typs mit einer niedrigeren Priorität.

Die CSS-Selektorpriorität wird durch die folgenden vier Aspekte bestimmt, geordnet von hoch nach niedrig:

1. Spezifität

Die Spezifität wird durch die Anzahl und Position der im Selektor verwendeten Selektortypen bestimmt. Die folgenden Arten von Selektoren weisen zunehmende Spezifität auf:

• ID-Selektor (#)
• Klassenselektor (.)
• Typselektor (HTML, Text usw.)
• Wildcard (*)

2

Wenn zwei Selektoren die gleiche Spezifität haben, hat derjenige Vorrang, der aus der spezifischeren Quelle stammt. Die Reihenfolge der Quellen ist:

• Inline-Stile
• Interne Stylesheets
• Externe Stylesheets
• User-Agent-Stylesheets

3. Wenn die Spezifität und Quellreihenfolge beider Selektoren gleich sind , hat die später im CSS-Dokument geschriebene Deklaration eine höhere Priorität.

4. Das Schlüsselwort Importance

!important kann eine Erhöhung der Priorität des Selektors erzwingen. Allerdings sollte seine Verwendung vermieden werden, da es die Wartbarkeit von CSS beeinträchtigt.

Beispiel: !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

🎜Das folgende Beispiel veranschaulicht die Anwendung von Prioritäten: 🎜rrreee🎜Im obigen Beispiel hat p.bold eine Spezifität von 2 (Typselektor + Klassenselektor) und die Die Deklaration enthält !important und hat daher die höchste Priorität. Daher wird für einen Absatz mit der Klasse p.bold der Stil (lila) von p.bold anstelle von #primary (speziell) angewendet style mit einer Spezifität von 1), .bold (Spezifität von 1) oder p (Spezifität von 0). 🎜

Das obige ist der detaillierte Inhalt vonWas ist die CSS-Selektorpriorität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!