Eine Einführung in die CSS-Prioritätsreihenfolge

CSS-Reihenfolge und -Priorität ist ein herausfordernder Teil der Gestaltung von Webseiten. Möglicherweise stellen Sie eines Tages fest, dass der CSS-Stil, den Sie anwenden wollten, nicht funktioniert. Es sieht so aus, als ob die Webseite Ihren Code nicht ausführt. Dies kann durch CSS-Reihenfolge oder Prioritätskonflikte verursacht werden. In diesem Artikel wird untersucht, was CSS-Reihenfolge und -Priorität sind und wie sie sich auf die Gestaltung von Webseiten auswirken.

Priorität

Der Browser bestimmt, welche CSS-Eigenschaftswerte für das Element relevant sind. Diese Regel basiert darauf, wie CSS-Selektoren verschiedene Arten von Regeln erstellen. Priorität ist der genaue Name, der einer bestimmten CSS-Deklaration Gewicht verleiht. Das Gewicht oder die „Wichtigkeit“ jeder Deklaration wird durch mehrere Selektortypen bestimmt, die dem passenden Selektor entsprechen. (Empfohlene Lektüre: Wie berechnet man die CSS-Priorität ? und CSS-Stil-Prioritätsreihenfolge)

Nur ​​Priorität Nur anwendbar Wenn ein Element über mehrere Deklarationen verfügt, hat das Zielelement basierend auf dem inhärenten Wert des Selektors Vorrang. Hier ist eine Liste, um den Unterschied in den Selektorwerten zu messen:

Typselektor: Dies ist ein Pseudoelement oder eine
-Klasse wie h1, h1 usw. Klassenselektoren: Dazu gehören Attributselektoren und Pseudoklassen wie: Hover usw.
.

Universelle Selektoren haben keinen Einfluss auf die Priorität und einige von ihnen beinhalten die Kombination von Selektoren wie (+, -, >, ~). Wir haben bereits erwähnt, dass Inline-Stile (z. B. Fett) immer Stile in externen Stylesheets überschreiben und an der Spitze der Kette mit der höchsten Priorität stehen.

Es gibt einige Regeln, die Sie beachten sollten, bevor Sie fortfahren. In Inline-CSS sind Stilattribute von HTML in erster Linie Regeln in Stilen und CSS-Dateien. Bestimmte Selektoren haben auch Vorrang vor weniger spezifizierten Selektoren. Code später im Dokument überschreibt alle zuvor festgelegten Rollen.

Achtung:! importantExceptions

Die Ausnahmen zu all diesen Spezifitätsregeln gelten, wenn Sie anrufen! wichtige Methode. Beim Aufruf überschreibt es alle anderen Deklarationen. Dies funktioniert zwar, ist aber im Allgemeinen eine schlechte Praxis. Dadurch wird die natürliche Kaskade im Arbeitsblatt unterbrochen und das Debuggen erschwert. Die beste Vorgehensweise, um die Verwendung zu vermeiden, ist einfach. Zunächst müssen Sie sich die Spezifitätsregeln ansehen, um den Vorrang vor einem anderen Stilelement zu erkennen. Wenn Sie es verwenden müssen! Wichtig: Verwenden Sie es mit Bedacht, indem Sie es nur auf einer einzigen Seite anwenden.

Kaskadierbarkeit

Es ist besser, Cascade zu verwenden, als es zu verwenden! wichtige Methode. Für alle, die mit den grundlegenden Aspekten von CSS oder Cascading Style Sheets nicht vertraut sind: Kaskadierung ist der Algorithmus, mit dem die Werte verschiedener Eigenschaften miteinander kombiniert werden.

Kaskadierung funktioniert, indem zunächst alle CSS-Deklarationen gefunden werden, die auf ein Element oder Attribut angewendet werden. Es beginnt mit der Herkunft (wo es deklariert wurde) und dann mit der Bedeutung der Deklaration. Anschließend wird die Spezifität berechnet. Jedes in eine HTML-Datei eingebettete CSS folgt dem externen Stylesheet, unabhängig von der Reihenfolge. Es ist wichtig, sich darüber im Klaren zu sein, welche Schritte die Kaskade unternehmen wird.

Wenn es einen Konflikt zwischen konkurrierenden Stilelementen gibt, müssen im Allgemeinen Besonderheiten berücksichtigt werden. Wenn sich ein Element genauso verhält, als ob Sie es nicht codiert hätten, dann erbt es Stile von etwas mit höherer Priorität. Beginnen Sie Ihr Styling mit minimaler Spezifität, um sicherzustellen, dass dieses Problem nicht auftritt.

Das obige ist der detaillierte Inhalt vonEine Einführung in die CSS-Prioritätsreihenfolge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!