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
Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet
In diesem Artikel wird der spezifische Code für d...
Detaillierte Erklärung des Inline-Formats von HTML-Tabellen
Inline-Format <colgroup>…</colgroup> ...
Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten
Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...
So legen Sie den Produktionsumgebungsmodus process.env.NODE_ENV fest
Bevor ich anfange, möchte ich betonen, dass proce...
Einführung in die neuen Funktionen von MySQL 8.0.11
MySQL 8.0 für Windows v8.0.11 offizielle kostenlo...
In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)
CSS-Schrifteigenschaften definieren die Schriftfa...
Ubuntu 18.04 Touchpad per Befehl deaktivieren/aktivieren
Unter Ubuntu kommt es häufig vor, dass sich das T...
JavaScript zum Erzielen eines Produktlupeneffekts
In diesem Artikel wird der spezifische JavaScript...
JS implementiert Layoutkonvertierung in Animation
Beim Schreiben von Animationen mit JS wird häufig...
Ein tiefer Einblick in JavaScript-Promises
Inhaltsverzeichnis 1. Was ist Promise? 2. Warum g...
Tutorial zur Installation und Konfiguration von Tomcat auf Alibaba Cloud Server und zum Hinzufügen externer Netzwerkzugriffsports
Alibaba Cloud Server installiert und konfiguriert...
Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)
iOS 1. URL-Schema Diese Lösung ist grundsätzlich ...
CSS Transition erweitert und reduziert Elemente durch Ändern der Höhe
Ein allgemeines Entwicklungsbedürfnis besteht dar...
Detaillierte Erklärung des JavaScript-Proxy-Objekts
Inhaltsverzeichnis 1. Was ist ein Proxy? 2. Wie w...
So implementieren Sie ein Hover-Dropdown-Menü mit CSS
Wie üblich werde ich heute über einen sehr prakti...