Verständnis des CSS-Selektorgewichts (persönlicher Test)
|
Code kopieren Der Code lautet wie folgt:<style type="text/css"> div.ui_infor p {Schriftgröße: 16px;} .ui_infor p {Schriftgröße: 14px;} </Stil> Code kopieren Der Code lautet wie folgt:<div Klasse="ui_infor"> <p>Test von CSS</p> </div> Im obigen Beispiel ist der endgültige Anzeigeeffekt die Schriftgröße: 16px und nicht die folgende Schriftgröße: 14px; Diese Kombination von Selektoren kann schnell beurteilt werden: 0,0,0,0 Die erste Ziffer steht für den Stil, der auf dem Etikett steht, z. B. Code kopieren Der Code lautet wie folgt:<p style="Schriftgröße: 14px;"></p> Die zweite Ziffer stellt den ID-Selektor dar, z. B. #demo {} Die dritte Ziffer steht für: Klassenname (.demo {}) oder Pseudoklasse (:hover) oder Attributselektor [rel="xx"] Die vierte Ziffer steht für: Tag-Selektor p {} Lassen Sie uns nun mit dem ersten Beispiel üben: Code kopieren Der Code lautet wie folgt:div.ui_infor p {Schriftgröße: 16px;} Seine Gewichte sind: 0,0,1,2 Code kopieren Der Code lautet wie folgt:.ui_infor p {Schriftgröße: 14px;} Seine Gewichte sind: 0,0,1,1 Ergebnis: 0,0,1,2 > 0,0,1,1, daher wird font-size: 16px angezeigt; Ergänzung: !important hat das höchste Gewicht, daher besteht kein Grund zur Beurteilung, aber es wird einen Fehler im IE-6-Browser verursachen. Beispiel: Code kopieren Der Code lautet wie folgt:p {Schriftgröße: 18px !wichtig;Schriftgröße: 12px;} Im IE-6-Browser wird die Schriftgröße 12px angezeigt. Einige Informationen im Internet besagen, dass IE-6 !important nicht unterstützt, was eigentlich falsch ist. Schauen wir uns ein Beispiel an: Code kopieren Der Code lautet wie folgt:p {Schriftgröße: 18px !wichtig;} p {Schriftgröße: 12px;} In IE-6 wird font-size: 18px angezeigt, was bedeutet, dass IE-6 !important unterstützt, die Leistung jedoch etwas seltsam ist. Das Seltsame ist, dass das !important-Attribut durch den letztgenannten Stil mit demselben Namen überschrieben wird. Beispielsweise überschreibt im Beispiel p {font-size: 18px !important;font-size: 12px;} font-size: 12px font-size: 18px !important. Mit dieser Eigenart können Sie "min-height" in IE-6 implementieren, ohne CSS_hack zu verwenden Code kopieren Der Code lautet wie folgt:p { min-height: 50px; height:auto !important; height:50px;} |
<<: Einführung in den Prozess der Erweiterung der Bootpartition in Kylin 4.0.2 (Ubuntu)
>>: MySQL-Tutorial versteht gespeicherte Prozeduren gründlich
Artikel empfehlen
Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren
Inhaltsverzeichnis 1. Die Rolle des Arrays: 2. De...
Neue Einstellungen für Text und Schriftarten in CSS3
Textschatten Textschatten: horizontaler Versatz, ...
Detaillierte Erläuterung der Nginx-Zugriffsbeschränkungskonfiguration
Was ist die Nginx-Zugriffsbeschränkungskonfigurat...
MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067
MySQL-Einstellungscode für grüne Version und Fehl...
Was Sie über Filter in Vue wissen müssen
Inhaltsverzeichnis Vorwort Was ist ein Filter So ...
Sieben verschiedene Farbschemata für das Website-Design-Erlebnis
Die Farbabstimmung beim Erstellen einer Website i...
HTML+Sass implementiert HambergurMenu (Hamburger-Menü)
Vor ein paar Tagen habe ich mir ein Video von ein...
Node.js versendet E-Mails basierend auf dem STMP-Protokoll und dem EWS-Protokoll
Inhaltsverzeichnis 1 Node.js-Methode zum Senden v...
So ändern Sie das Root-Passwort in einem Container mit Docker
1. Verwenden Sie den folgenden Befehl, um das SSH...
Verwenden von JavaScript in HTML
Das <script>-Tag In HTML5 hat Skript die fo...
Vue.js implementiert Kalenderfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung der virtuellen React-Liste
Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...
Vue implementiert Upload-Komponente
Inhaltsverzeichnis 1. Einleitung 2. Ideen Zwei Mö...
Die Vollversion des gängigen Linux-Tools vi/vim
Warum Vim lernen? Linux verfügt über eine große A...
So implementieren Sie Bildmapping mit CSS
1. Einleitung Mit Imagemaps können Sie Bereiche e...