Detaillierte Erläuterung der CSS-Struktur und Kaskadierung

CSS ist die Abkürzung für Cascading Style Sheets, was bedeutet, dass das Konzept der Kaskade sehr wichtig ist. Auf der grundlegendsten Ebene zeigt es, dass die Reihenfolge der CSS-Regeln wichtig ist, aber es ist noch komplizierter. Welcher Selektor in der Kaskade gewinnt, hängt von drei Faktoren ab (diese sind in der Reihenfolge ihrer Gewichtung – der frühere hat Vorrang vor dem späteren):

• Wichtigkeit (Wichtigkeit)

• Spezifität

• Quellenreihenfolge (Quellenreihenfolge)

Wichtigkeit

!wichtig

In CSS gibt es eine spezielle Syntax, die es einer Regel ermöglicht, immer Vorrang vor anderen Regeln zu haben: !important. Das Hinzufügen nach dem Eigenschaftswert macht die Aussage unglaublich aussagekräftig.

Hinweis: Die einzige Möglichkeit, diese !important-Deklaration zu überschreiben, besteht darin, eine Deklaration desselben !important-Attributs in späteren Quellcode oder in einen Quellcode mit höherer Spezifität aufzunehmen.

Es ist nützlich zu wissen, dass !important existiert, damit Sie wissen, was es ist, wenn Sie im Code einer anderen Person darauf stoßen. Aber! Wir empfehlen Ihnen, es niemals zu verwenden, es sei denn, dies ist unbedingt erforderlich. Eine Situation, in der Sie es möglicherweise verwenden müssen, ist, wenn Sie in einem CMS arbeiten, in dem Sie die Kern-CSS-Module nicht bearbeiten können und Sie wirklich einen Stil überschreiben möchten, der nicht auf andere Weise überschrieben werden kann. Verwenden Sie es jedoch nicht, wenn Sie es vermeiden können. Da !important die Funktionsweise der Kaskadierung verändert, kann das Debuggen von CSS-Problemen, insbesondere in großen Stylesheets, sehr schwierig werden.

Stylesheet-Quellen

Es ist wichtig zu beachten, dass die Bedeutung einer CSS-Deklaration davon abhängt, in welchem ​​Stylesheet sie angegeben ist – ein Benutzer kann ein benutzerdefiniertes Stylesheet festlegen, um die Stile des Entwicklers zu überschreiben , z. B. Sie sind möglicherweise sehbehindert und möchten die Schriftgröße für alle von Ihnen besuchten Seiten auf das Doppelte der normalen Größe einstellen, um das Lesen zu erleichtern.

Widersprüchliche Deklarationen werden in der folgenden Reihenfolge angewendet, letztere überschreibt die vorherige Deklaration:

• Deklarationen in User-Agent-Stylesheets (für Beispiel: der Standardstil des Browsers ohne andere Deklarationen.

• Gewöhnliche Deklarationen in Benutzer-Stylesheets (vom Benutzer festgelegte benutzerdefinierte Stile).

• Eine normale Deklaration im Autoren-Stylesheet (dies ist der Stil, den wir festlegen, Webentwickler).

• Wichtige Aussage im Autoren-Stylesheet

• Wichtige Aussage im Benutzer-Stylesheet (höchste Priorität)

Es ist sinnvoll, dass das Stylesheet des Webentwicklers das Stylesheet des Benutzers überschreibt, sodass das Design erwartet bleiben kann. Manchmal hat der Benutzer jedoch einen guten Grund, den Stil des Webentwicklers zu überschreiben. Wie oben erwähnt, kann dies durch Verwenden von !important in erfolgen die Regeln des Benutzers.

Spezifität

Spezifität ist im Grunde ein Maß dafür, wie spezifisch ein Selektor ist – wie viele Elemente er übereinstimmt. Wie im oben gezeigten Beispiel gezeigt, weisen Elementselektoren eine sehr geringe Spezifität auf. Klassenselektoren sind spezifischer und schlagen Elementselektoren. ID-Selektoren haben eine noch höhere Spezifität und werden daher Klassenselektoren übertreffen.

Der Grad der Spezifität eines Selektors wird anhand von vier verschiedenen Werten (oder Komponenten) gemessen, die man sich als Tausender, Hunderter, Zehner und Einer vorstellen kann – in vier vier einfachen Zahlen in einer Spalte:

• Tausende: Fügen Sie 1 Punkt zu dieser Spalte hinzu, wenn sich die Deklaration in einem Stilattribut befindet (solche Deklarationen haben keine Selektoren, daher ist ihre Spezifität immer 1000. ), andernfalls 0.

• Hunderter: Addieren Sie 1 Punkt für jeden ID选择器就, der im gesamten Selektor in dieser Spalte enthalten ist.

• Zehner: Fügen Sie 1 Punkt zur Spalte für jedes 类选择器, 属性选择器 oder 伪类 hinzu, das im gesamten Selektor enthalten ist.

• Einheitenziffer: Fügen Sie 1 Punkt zur Spalte für jedes 元素选择器 oder 伪元素 hinzu, das im gesamten Selektor enthalten ist.

Hinweis: Universelle Selektoren (*), zusammengesetzte Selektoren (+, >, ~, ' ') und negative Pseudoklassen (:not) haben keinen Einfluss auf die Spezifität.

Beispiel

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#important	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
#important p > p > a:hover, 在一个元素的 <style> 属性里	1	1	1	3	1113

Hinweis: Wenn mehrere Selektoren die gleiche Wichtigkeit und Spezifität haben, hängt der ausgewählte Selektor von der Quellreihenfolge ab.

Quellenreihenfolge

Wenn mehrere konkurrierende Selektoren die gleiche Wichtigkeit und Spezifität haben, hilft ein dritter Faktor bei der Entscheidung, welche Regel gewinnt – spätere Regeln werden frühere Regeln übertrumpfen.

Vererbung

CSS-Vererbung ist der letzte Teil, den wir untersuchen müssen, um alle Informationen zu erhalten und zu verstehen, welche Stile auf die Elemente angewendet werden. Die Idee ist, dass einige auf ein Element angewendete Attributwerte von den untergeordneten Elementen dieses Elements geerbt werden, andere jedoch nicht.

Welche Attribute standardmäßig vererbt werden und welche nicht, entspricht größtenteils dem gesunden Menschenverstand. Wenn Sie sicher sein möchten, können Sie sich auf die CSS-Referenz beziehen. Jede einzelne Eigenschaftenseite beginnt mit einer Übersichtstabelle, die verschiedene Details zum Element enthält, einschließlich der Frage, ob es vererbt wird.

Geerbte Eigenschaften gehören zu den grundlegendsten Inhalten von CSS. Sie werden im Allgemeinen nicht speziell berücksichtigt, aber Sie müssen sich dennoch Folgendes merken:

• Der Großteil des Box-Modells Eigenschaften (z. B. Rahmen) werden nicht vererbt.

• Vererbung hat keine besonderen Merkmale und ist kleiner als 0,0,0,0 wie * {color: red;}

Vererbung steuern

CSS bietet drei spezielle allgemeine Attributwerte für die Handhabung der Vererbung:

• inherit: Dieser Wert wird auf den Attributwert von angewendet Das ausgewählte Element wird so festgelegt, dass es mit seinem übergeordneten Element identisch ist.

• initial: Dieser Wert setzt den auf das ausgewählte Element angewendeten Attributwert auf denselben Wert, der für dieses Element im Standard-Stylesheet des Browsers festgelegt ist. Wenn im Standard-Stylesheet des Browsers kein Wert festgelegt ist und die Eigenschaft auf natürliche Weise vererbt wird, wird der Eigenschaftswert auf inherit festgelegt.

• unset : Dieser Wert setzt das Attribut auf seinen natürlichen Wert zurück, d. h. wenn das Attribut natürlich vererbt wird, verhält es sich wie inherit, andernfalls verhält es sich wie initial.

Zusammenfassung

Der Name Cascading Style Sheets ist treffend. Der Ansatz von CSS besteht darin, Stile zu kaskadieren, was durch eine Kombination aus Vererbung und Spezifität erreicht wird. Die Kaskadenregeln von CSS2.1 sind recht einfach.

1. Finden Sie alle relevanten Regeln, die Selektoren enthalten, die einem bestimmten Element entsprechen.

2. Ordnet alle auf dieses Element angewendeten Deklarationen nach expliziter Gewichtung. Regeln mit der Flagge !important haben eine höhere Gewichtung als Regeln ohne die Flagge !important . Sortiert alle auf ein bestimmtes Element angewendeten Deklarationen nach Quelle. Es gibt drei Quellen: Ersteller, Leser und Benutzeragenten. Normalerweise übertrifft der Stil des Autors den Stil des Lesers. Leserstile mit dem !important-Tag sind stärker als alle anderen Stile, einschließlich Autorenstilen mit dem !important-Tag. Sowohl der Autoren- als auch der Leserstil sind stärker als die Standardstile des Benutzeragenten.

3. Ordnet alle auf ein bestimmtes Element angewendeten Deklarationen nach Spezifität, wobei Elemente mit höherer Spezifität stärker gewichtet werden als Elemente mit niedrigerer Spezifität.

4. Ordnet die Summe an Deklarationen, die auf ein bestimmtes Element in der Reihenfolge ihres Auftretens angewendet werden. Je später eine Anweisung in einem Stylesheet oder Dokument erscheint, desto größer ist ihr Gewicht. Wenn im Stylesheet ein importiertes Stylesheet vorhanden ist, wird im Allgemeinen davon ausgegangen, dass die im importierten Stylesheet erscheinende Anweisung an erster Stelle steht und alle darin enthaltenen Anweisungen Das Haupt-Stylesheet kommt zuletzt.

Verwandte Empfehlungen:

CSS-Struktur und -Layout

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Struktur und Kaskadierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!