Heim > Artikel > Web-Frontend > Teilen Sie eine ausführliche Einführung in das Style-Override-Prinzip in CSS
Teilen Sie eine ausführliche Einführung in das Style-Override-Prinzip in CSS
- 黄舟Original
- 2017-07-22 10:58:171464Durchsuche
Regel 1: Wenn aufgrund der Vererbung ein Stilkonflikt auftritt, gewinnt der nächste Vorfahre (Das Prinzip der nächsten Generation).
Der Vererbungsmechanismus von CSS ermöglicht es einem Element, Stile von den Vorgängerelementen zu erben, die es enthalten:
<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}
p {color:blue;}
</style>
</head>
<body>
<p>welcome to <strong>gaodayue的网络日志</strong>
</p>
</body>
</html>stark bzw. stark Das Farbattribut wird in body und p vererbt, aber da p im Vererbungsbaum näher an strong liegt, erbt der Text in strong schließlich die blaue Farbe von p.
Regel 2: Wenn ein geerbter Stil mit einem direkt angegebenen Stil in Konflikt steht, gewinnt der direkt angegebene Stil (Das direkteste Prinzip).
Wenn im obigen Beispiel auch der Stil des starken Elements angegeben wird, wie zum Beispiel:
strong {color:red;}, dann wird gemäß Regel 2 der Text in stark wird schließlich als rot angezeigt.
Regel 3: Wenn direkt angegebene Stile in Konflikt geraten, gewinnt derjenige mit der höheren Stilgewichtung.
Die Gewichtung des Stils hängt von der Stilauswahl ab. Die Gewichtung ist in der folgenden Tabelle definiert.
CSS-Selektorgewicht
Tag-Selektor 1
Klassenselektor 10
ID-Selektor 100
Inline-Stil 1000
Pseudoelement (:erstes Kind usw.) 1
Pseudoklasse (:link usw.) 10
Wie Sie sehen können, ist das Gewicht des Inline-Stils>>ID-Selektor>>Klassenselektor>>Label-Selektor außerdem das Gewicht von Der Nachkommenselektor ist die Summe aller Gewichte. Das Gewicht von „#nav .current a“ beträgt beispielsweise 100 + 10 + 1 = 111.
Regel 4: Wenn die Stilgewichte gleich sind, gewinnt letzterer.
Betrachten Sie die folgende Situation
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>
.byline a {color:red;}p .email {color:blue;} Sowohl „.byline a“ als auch „p .email“ geben direkt das obige a-Element an, und die Gewichte sind beide 11, gemäß Regel vier, ist die endgültige Anzeige blau.
Da Stylesheets extern oder intern sein können, erinnert uns Regel 4 daran, auf die Reihenfolge zu achten, in der externe Stylesheets eingeführt werden (und die Reihenfolge der 2cdf5bf648cf2f33323966d7f58a7f3f-Elemente) sowie auf externe Stylesheets und interne Stile Die Position, an der die Tabelle angezeigt wird. Im Allgemeinen erscheinen interne Stylesheets nach der Einführung aller externen Stylesheets, normalerweise vor 9c3bca370b5104690d9ef395f2c5f8d1.
Regel 5: !wichtige Stilattribute werden nicht überschrieben.
!important kann als „goldener Finger“ angesehen werden, um die oben genannten vier Regeln zu brechen, wenn es unbedingt notwendig ist. Wenn Sie ein bestimmtes Stilattribut verwenden und verhindern müssen, dass es überschrieben wird, können Sie nach dem Attributwert !important hinzufügen. Am Beispiel von Regel 4 kann „.byline a {color:red !important;}“ erzwingen Der Link wird rot angezeigt. In den meisten Fällen können Stilüberschreibungen auf andere Weise gesteuert werden und !important kann nicht missbraucht werden.
Das obige ist der detaillierte Inhalt vonTeilen Sie eine ausführliche Einführung in das Style-Override-Prinzip in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!