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
Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx
Vorwort Das integrierte Modul von Nginx unterstüt...
Verwendung des offiziellen MySQL-Exporttools mysqlpump
Inhaltsverzeichnis Einführung Anweisungen Tatsäch...
Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
In Gästebüchern, Foren und anderen Orten werden i...
Gründe und Optimierungslösungen für langsames MySQL-Limit-Paging mit großen Offsets
In MySQL verwenden wir normalerweise ein Limit, u...
JavaScript-Puzzlespiel
In diesem Artikelbeispiel wird der spezifische Ja...
Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux
Inhaltsverzeichnis Hintergrund 1) Aktivieren Sie ...
Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden
Methode 1: Ändern Sie die Datei .bashrc oder .bas...
Vue3 (V) Details zur Integration der HTTP-Bibliothek axios
Inhaltsverzeichnis 1. Installieren Sie axios 2. V...
Lösungen für Websites mit hohem Datenverkehr
Erstens: Stellen Sie zunächst sicher, dass die Ser...
5 einfache XHTML-Webformulare für Webdesign
Einfaches XHTML-Webformular im Webdesign 5. Techn...
Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen
Problem: vue-cil3 wird mit Warnungen ausgeführt, ...
Anweisungen zur Verwendung von JSON-Operationsfunktionen in Mysql5.7
Vorwort JSON ist ein leichtes Datenaustauschforma...
So vereinfachen Sie Redux mit Redux Toolkit
Inhaltsverzeichnis Probleme, die Redux Toolkit lö...
SSH-Portweiterleitung zur Erzielung einer Intranet-Penetration
Die Maschinen in unserem LAN können auf das exter...
Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)
In diesem Artikelbeispiel wird der spezifische Co...