Wie kann ich mithilfe von Spezifität Website-CSS-Stile mit benutzerdefiniertem CSS überschreiben?-CSS-Tutorial-php.cn

Wie kann ich mithilfe von Spezifität Website-CSS-Stile mit benutzerdefiniertem CSS überschreiben?

DDD

Freigeben： 2024-10-24 14:09:02

Original

196 Leute haben es durchsucht

How to Override Website CSS Styles with Custom CSS Using Specificity?

Überschreiben von Website-CSS-Stilen mit benutzerdefiniertem CSS

Ihre Website besteht aus drei automatisch eingebundenen CSS-Dateien und Sie haben keinen Zugriff auf die Datei index.html. Sie haben jedoch die Kontrolle über die CSS-Dateien der Website und beabsichtigen, eine neue CSS-Datei zu erstellen, um die vorhandenen zu überschreiben.

Die Verwendung von @import url(css4.css) war möglicherweise Ihr erster Versuch, scheiterte jedoch überschreibt den Stil der letzten CSS-Datei. Dieses Problem ergibt sich aus dem Konzept der „CSS-Spezifität“.

CSS-Spezifität

CSS-Spezifität bestimmt die Priorität von Stildeklarationen für ein Element. Es besteht aus vier Komponenten:

Inline: Stile, die direkt auf ein Element angewendet werden
Id: Stile, die auf ein Element mit an angewendet werden ID
Klasse: Stile, die auf ein Element mit einer Klasse angewendet werden
Element: Stile, die auf eine beliebige Instanz eines bestimmten Elementtyps angewendet werden

Das Gewicht jeder Komponente wird im folgenden Format dargestellt: inline | id | Klasse | Element. Je höher die Gewichtung in einer Spalte, desto höher die Spezifität.

Spezifitätskonflikte lösen

Um vorhandene CSS-Stile zu überschreiben, müssen Sie sicherstellen, dass Ihr neues CSS eine höhere Spezifität als die widersprüchlichen Stile aufweist. Wenn das vorhandene CSS beispielsweise einen Klassenselektor verwendet, müssen Sie in Ihrem benutzerdefinierten CSS eine ID oder einen Inline-Selektor verwenden.

Beispiel zur Spezifität aufschlüsseln

Der bereitgestellte Code veranschaulicht die CSS-Spezifität in Aktion :

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
#id {background-color: green}
.class {background-color: yellow }
section {background-color: blue }
.inline {background-color: purple !IMPORTANT }</code>

Nach dem Login kopieren

Das

mit dem Inline-Stil von Hintergrundfarbe: Rot erscheint lila, obwohl der Inline-Stil eine höhere Spezifität hat (1|0|0|0). Dies liegt daran, dass das benutzerdefinierte CSS !important für die .inline-Klasse festlegt, was angibt, dass sein Stil alle anderen überschreiben soll.

Fazit

Wenn Sie die CSS-Spezifität verstehen, können Sie die Darstellung Ihrer Website präzise steuern Elemente. Durch die bewusste Verwendung höherer Spezifitätswerte können Sie vorhandene CSS-Stile problemlos überschreiben und benutzerdefinierte Designs erstellen, ohne die ursprüngliche index.html-Datei bearbeiten zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von Spezifität Website-CSS-Stile mit benutzerdefiniertem CSS überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!