Wie kompliziert ist die Priorität von CSS-Stilen?

Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage angesehen und festgestellt, dass sich einige Leute über die Priorität von CSS-Stilen nicht ganz im Klaren waren. Außerdem habe ich diesen Wissenspunkt bereits zuvor zusammengefasst. Heute werde ich mir etwas Zeit nehmen, um aufzuschreiben, was ich weiß, damit wir gemeinsam Fortschritte machen können ...
Die Priorität von CSS-Stilen ist ein komplexer Wissenspunkt. Ich denke sogar, dass seine Komplexität mit "Floating" und "Boxmodell" vergleichbar ist. Ich habe lange über diesen Artikel nachgedacht und vielleicht lässt er sich mit diesem Reim zusammenfassen: „Ein Jahr, zwei Positionen, drei wichtige und vier besondere“. Nachfolgend finden Sie eine ausführliche Erklärung:

1. „Tragen“
 Das „载“ bezieht sich hier auf den Träger, also das Stylesheet. Für Entwickler ist oft nur das „Laden“ beteiligt, es gibt aber noch zwei weitere. Was sind Sie? Die Einzelheiten lauten wie folgt:
1. Benutzerseitiges Stylesheet: Dies ist das Standard-Stylesheet des Browsers. Nur wenn seine Regeln befolgt werden, können die ursprünglichen Attribute von div „display:block“ und span „display:inline“ sein.
2. Benutzer-Stylesheet: Ein Stylesheet, das von der Person definiert wird, die den Browser verwendet. Vielleicht können Sie es nicht verstehen, aber es ist tatsächlich möglich. Für die spezifische Einstellungsmethode nehme ich Firefox als Beispiel. Die Schritte sind wie folgt: (1) Menüleiste „Hilfe“ -> Informationen zur Fehlerbehebung -> Anwendungsgrundlagen -> Ordner öffnen -> Chrome; (2) Erstellen Sie eine CSS-Datei mit dem Namen userContent.css, bearbeiten Sie sie, fügen Sie die erforderlichen Stile hinzu und speichern Sie sie. Beachten Sie, dass der Name userContent.css sein muss und nicht geändert werden kann. Andernfalls ist es ungültig; (3) Starten Sie Firefox neu. Ich habe die „Hot Discussions“ auf der w3cfuns-Homepage als Beispiel genommen und ihren Stil festgelegt. Die Ergebnisse sind wie folgt:

Der ursprüngliche Effekt ist wie folgt:

Durch die oben genannten Aspekte können wir die Darstellung der Website automatisch ändern.
3. Autoren-Stylesheet: Dies ist das Stylesheet, das wir am besten kennen. Es ist vom Entwickler geschrieben. Das Stylesheet, von dem wir oft sprechen, bleibt tatsächlich auf dieser Ebene, da es uns am nächsten ist!

2. Stellung
 Der Grund, warum „Position“ an zweiter Stelle steht, hat folgende Gründe: (1) „Position“ bezieht sich auf zwei Punkte: die Position der Stildeklaration und die Position des Stylesheet-Links; (2) Ob es sich um die Position der Stildeklaration oder die Position des Stylesheet-Links handelt, ist entwicklerspezifisch und stellt den dritten Punkt in „Laden“ dar. Daher müssen wir zuerst „Laden“ erklären.

Nachdem die Gründe nun klar sind, kommen wir zu den Einzelheiten der „Position“. Genau wie beim ersten Punkt der Gründe werde ich von zwei Punkten ausgehen:
1. Ort der Stildeklaration: Generell gibt es vier Möglichkeiten, einen Stil zu deklarieren. Abgesehen von @import und einer weiteren (die selten verwendet wird, sodass ich ihren Namen vergessen habe) gibt es derzeit zwei gängige Möglichkeiten: inline und extern. Für inline wird das Stil-Tag und für extern das Link-Tag verwendet. Abgesehen von der Interferenz von Stilstilen (siehe Punkt vier) folgt die Stilpriorität an dieser Stelle dem Prinzip der Nachzügler, d. h. die später im Stilblatt deklarierten Stile haben eine höhere Priorität als die früher deklarierten. Beispielsweise wird in der Datei style.css in der ersten Zeile der folgende Stil deklariert:

Code kopieren
Der Code lautet wie folgt:

p{color:#f00;}

Die dritte Zeile deklariert den folgenden Stil:

Code kopieren
Der Code lautet wie folgt:

p{Farbe:#000;}

Die endgültige Schriftfarbe von p ist dann Schwarz.

2. Position der Stylesheet-Links: Derselbe Stil kann in zwei Stylesheets deklariert sein, und dieselbe HTML-Seite kann diese beiden Stylesheets gleichzeitig aufrufen. In diesem Fall kann die Priorität der Stile immer noch nach dem Prinzip des späteren Auftauchens bestimmt werden, aber die späteren Objekte sind unterschiedlich. Beispiel: Auf einer HTML-Seite sieht der Head-Code folgendermaßen aus:

Code kopieren
Der Code lautet wie folgt:

<Kopf>
<link href="firstStyle.css" rel="stylesheet" type="text/css">
<link href="zweiterStyle.css" rel="stylesheet" type="text/css">
</Kopf>

Wenn Sie zu diesem Zeitpunkt einen solchen Stil in firstStyle.css deklarieren:

Code kopieren
Der Code lautet wie folgt:

p{color:#f00;}

Und in secondStyle.css wird der folgende Stil deklariert:

Code kopieren
Der Code lautet wie folgt:

p{Farbe:#000;}

Die endgültige Schriftfarbe von p ist dann Schwarz. Dabei kommt es auf das später eingebundene Stylesheet an.

3. „Wichtig“
„Wichtig“ bedeutet wichtig. Mit einem Ausrufezeichen bedeutet es, dass es von größter Wichtigkeit ist. Daher sind allgemeine Stilerklärungen wie Kunpeng in der glücklichen Reise nach Westen. Am Ende kann es nur „verzweifelt seufzen“. Aber ausgehend vom Wort „laden“ werden wir noch einmal darüber nachdenken: Wenn ein wichtiger Stil im Benutzer-Stylesheet deklariert ist und ein wichtiger Stil auch im Autor-Stylesheet deklariert ist, welcher hat dann eine höhere Priorität?
Daher scheint die Erklärung der „Position“ im zweiten Punkt gewissen Einschränkungen zu unterliegen. Ausgehend von „Belastung“, kombiniert mit „Wichtigkeit“, lässt sich der Prioritätsvergleich auf folgende 5 Punkte erweitern:
1. Vom Benutzer deklarierter Stil
2. Benutzerstile ohne !important
3. Autorenstile ohne !important
4. !important-Autorenstil hinzugefügt
5. Benutzerstile mit !important werden aufsteigend sortiert. Das heißt, der Stil von Punkt 5 ist höher als der von Punkt 4 und so weiter. Für Entwickler ist zu sagen, dass das Hinzufügen von „wichtig“ die höchste Ebene ist und spätere Stile dies nicht ersetzen können. Aus diesem Grund sollte die Verwendung von „wichtig“ in Stilen so weit wie möglich vermieden werden. Denn sobald „wichtig“ deklariert ist, erreicht die Stilebene die höchste Ebene und der Kernmechanismus von CSS, die Kaskade, verliert seine Bedeutung. Auf diesen Punkt gilt es zu achten.

4. „Besonders“
 Bei der Beschreibung der „Position“ habe ich das Style-Tag übersprungen und bin gleich auf einen Punkt eingegangen, nämlich das Prinzip des Aufholens von hinten; und habe das Beispiel des P-Tags gegeben. Tatsächlich ist das von mir angeführte Beispiel für erfahrene Front-End-Mitarbeiter nicht „richtig“, da nicht viele Leute die Lust hätten, die Stile zweier p-Elemente im selben Stylesheet zu deklarieren und letzteres anstelle von ersterem zu verwenden. Eigentlich wollte ich nur das Prinzip veranschaulichen. Okay, lassen Sie mich Ihnen ein weiteres Beispiel geben, um den Sinn des Wortes „besonders“ zu verdeutlichen. Zuerst ein Stück HTML-Code:

Code kopieren
Der Code lautet wie folgt:

<div id="erstesDiv" Klasse="erstesDiv">
<div id="zweitesDiv" Klasse="zweitesDiv">
<p id="pElem" class="pElem" style="color:black;">glücklich</p>
</div>
</div>

Die folgenden Stile werden in ein Stylesheet mit dem Namen style.css geschrieben:

Code kopieren
Der Code lautet wie folgt:

#ersteDiv #zweiteDiv #pElem{color:red;}
#erstesDiv #zweitesDiv .pElem{color:yellow;}
#firstDiv .pElem{color:blue;}
#firstDiv p{color:gray;}

Wie Sie sehen, ist die Schriftfarbe von p schwarz. Wenn das Style-Tag gelöscht wird, ist die Schriftfarbe von p rot. Wenn die erste Zeile des Stylesheets gelöscht wird, ist die Schriftfarbe von p gelb und dann blau und grau.
Diese Funktion von CSS wird als „Spezifitätskontrast“ bezeichnet. Es gibt eine Reihe etablierter Kontrastmethoden, und ihre Positionen können durch die vier Buchstaben a, b, c und d dargestellt werden. „a“ bezieht sich auf das Stil-Tag, „b“ auf den ID-Selektor, „c“ auf den Klassenselektor und die Pseudoklasse und „d“ auf den Elementselektor und das Pseudoelement.
So vergleichen Sie sie: Wenn a gleich ist, vergleichen Sie b; wenn a und b gleich sind, vergleichen Sie c; wenn a, b und c gleich sind, vergleichen Sie d. Was ist, wenn sie alle gleich sind? „Von hinten kommen und gewinnen“.

Lassen Sie uns dies anhand des obigen Beispiels erklären. Da in p ein Stil vorhanden ist, also ein a existiert, hat es die höchste Priorität. Daher ist die Schriftfarbe von p schwarz. Wenn ein Stil gelöscht wird, existiert kein a, daher wird der ID-Selektor berücksichtigt. Die erste CSS-Deklaration hat 3 IDs, also mehr als die folgenden, also ist es der endgültige Stil; und so weiter.

Fazit : Eigentlich wollte ich nur etwas Zeit mit Schreiben verbringen, hätte aber nicht gedacht, dass es so viel Zeit in Anspruch nehmen würde, das ist etwas übertrieben! Es sollte gesagt werden, dass dieser Artikel fast alle Aspekte der Priorität abdeckt. Ich weiß nicht, ob Sie das klar erkennen können. Einige der Codes in diesem Artikel wurden nicht getestet. Sie wurden nur auf der Grundlage einiger Erfahrungen und früherer Experimente erhalten. Die Ergebnisse können falsch sein. Wenn Sie welche finden, weisen Sie bitte darauf hin. Aber im Allgemeinen ist es immer noch relativ verantwortungsvoll und wird die Studierenden nicht „in die Irre führen“. Damit ist das Ende erreicht...

<<:  Lösung für das Problem, dass das direkte Festlegen der Breite und Höhe eines Hyperlinks nicht funktioniert

>>:  Lösung für das Jitter-Problem beim CSS3-Transformationsübergang

Artikel empfehlen

HTML (CSS-Stilspezifikation) muss lauten

CSS-Stilspezifikationen 1. Klassenauswahl 2. Tag-...

So ändern Sie die Container-Portzuordnung in Docker dynamisch

Vorwort: Die Docker-Portzuordnung erfolgt häufig,...

Das Phänomen des Margin-Top-Collapses und die spezifische Lösung

Was ist ein Margin-Top-Collaps? Der Margin-Top-Co...

MySQL-Anmeldefehler beheben: „Zugriff für Benutzer ‚root‘@‚localhost‘ verweigert“

Erstens weiß ich nicht, warum ich mich über die B...

Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue

1. Front-End-geführte Implementierungsschritte De...

Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt

Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...

Zusammenfassung der WEBAPP-Entwicklungskompetenzen (Hinweise zur Entwicklung mobiler Websites)

1. Um das Web responsive zu entwickeln, muss sich...

Vue implementiert eine Eingabekomponente, die den Tastenkombinationseffekt der Tastenanzeige erhält

Ich bin auf die Anforderung gestoßen, Tastenkombi...

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

1. Was ist Master-Slave-Replikation? Die DDL- und...

Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel

Kürzlich habe ich MySQL verwendet, um Tabellendat...

Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler

Der Nginx 502 Bad Gateway-Fehler ist mir schon me...

27 Linux-Befehle zum Bearbeiten von Dokumenten, die es wert sind, gesammelt zu werden

Linux-Befehl „col“ Der Linux-Befehl col wird zum ...

Regenbogen-Button-Stil erstellt mit CSS3

Ergebnis: Implementierungscode: html <div Klas...

Detaillierter Prozess der FastAPI-Bereitstellung auf Docker

Docker-Lernen https://www.cnblogs.com/poloyy/p/15...

Detaillierte Erklärung zur Konfiguration einer statischen IP in Centos8

Nach der Installation von CentOS 8 wird beim Neus...