Was ist die Reihenfolge der Vorrang vor CSS??

Was ist die Reihenfolge der Vorrang vor CSS??
Die Vorrangsreihenfolge für CSS definiert, welche CSS -Eigenschaften vor den anderen Elementen priorisiert und ausgeführt werden sollten. Der Browser muss das Problem der Reihenfolge lösen, in der die CSS -Eigenschaften ausgeführt werden sollten.

Die Eigenschaft, die den höheren Vorrang hat. Es gibt also eine Liste, in der CSS -Eigenschaften auf der Grundlage ihrer Vorrang.

CSS -Eigenschaften, die vom höchsten bis niedrigsten Vorrang rangiert haben

Der Vorrang der CSS -Elemente von höher als den niedrigeren Rang ist wie folgt:

  • Der !wichtiges Eigentum
  • CSS -Eigenschaft direkt auf Element gesetzt
  • Kombinierte Selektoren
  • ID -Selektor
  • Klassenauswahl
  • Attributauswahl
  • Elementauswahl
  • *
  • Ererbte Stile

Eine kurze Beschreibung jeder Eigenschaft

Lassen Sie uns diese CSS -Eigenschaften und -Elemente ausführlich in der Reihenfolge ihrer Vorrang.

Der !wichtige Regel

Da ist ein "!wichtigRegel in CSS, die vor allen anderen CSS -Eigenschaften ausgeführt werden, wenn existiert wird. Es deklariert eine bestimmte Eigenschaft als die höchste Vorrang. Die Eigenschaft, die das enthält “!wichtigDie Regel wird unter allen anderen Regeln die höchste Vorrang haben.

Die Eigenschaft, die das hat “!wichtigDie Regel dominiert über die anderen Eigenschaften. In der Tat das "!wichtigRegel überschreibt die Bedeutung der anderen Eigenschaften.

Schreiben wir einen Code -Snippet, um die Auswirkungen davon zu verstehen. “!wichtig”Regel in einem Dokument. Hier ist ein HTML -Code -Snippet, das drei einfache Sätze in die Ausgabe einfügt:

Dies ist die Zeile 1


Dies ist die Zeile 2


Dies ist die Zeile 3

Wir fügen drei Eigenschaften im CSS -Stil hinzu, um jeweils unterschiedliche Hintergrundfarben festzulegen:

.MyClass Hintergrundfarbe: Rot;
#myid Hintergrundfarbe: Grün;
P Hintergrundfarbe: Gelb !wichtig;

Der Code -Snippet sieht so aus!wichtig”Regel, die für die Eigenschaft eingefügt ist, die die Hintergrundfarbe gelb setzt, dominiert über alle anderen Eigenschaften, und die Ausgangsschnittstelle lautet wie folgt:

Allerdings manchmal das “!wichtig"Die Eigenschaft funktioniert nicht ordnungsgemäß wegen mehrerer"!wichtig”Regeln für dieselbe Eigentumsart.

Die CSS -Eigenschaften werden auf der Grundlage ihrer Vorrang. Nach dem "!wichtigRegel, alle Eigenschaften werden gemäß ihren erklärten Vorrang.

CSS -Eigenschaft direkt auf Element gesetzt

Wenn es eine CSS -Eigenschaft gibt, die direkt auf ein Element im CSS -Stil eingestellt ist, hat es im Vergleich zu allen anderen Eigenschaften die höchste Vorrang.

Kombinierte Selektoren

Diese haben weniger Spezifität und Bedeutung als die direkten Elemente -Selektoren, aber eine größere Spezifität als andere Eigenschaften i.E ID -Selektor, Klassenauswahl und Attributauswahl.

ID -Selektor

Es hat eine höhere Spezifität als Klasse- und Attribut -Selektoren und niedriger als kombinierte Selektoren.

Klassenauswahl

Es hat weniger Vorrang als der ID -Selektor und eine höhere Vorrang.

Attributauswahl

Ein Attribut hat eine höhere Vorrang.

Elementauswahl

Die Elementelektoren haben Vorrang weniger als die Attribut-, Klasse- und ID -Selektoren.

Der All -Selector ( *)

Es hat den niedrigsten Vorrang unter allen Selektoren im CSS -Stilelement.

Ererbte Stile

Da sich die ererbten Stile auf den übergeordneten und nicht auf das genau gezielte Element selbst beziehen, hat es die niedrigste Vorrang in der Liste aller Stileigenschaften in CSS.

Oben erläutert ist die Liste der Vorrangsreihenfolge der CSS -Stilelemente.

Abschluss

Wie alle anderen Codierungssprachen hat CSS auch eine Vorrangreihenfolge, nach der die Operationen ausgeführt werden. Während des Hinzufügens von CSS -Eigenschaften in jedem Dokument muss der Browser den Konflikt löschen, dessen Eigenschaft vor dem anderen ausgeführt werden sollte und welche Eigenschaften die anderen Eigenschaften vollständig außer Kraft setzen. Daher muss der Browser den Code gemäß der Vorrangsreihenfolge von CSS ausführen.