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
So öffnen Sie ein temporäres QQ-Dialogfeld, um online zu chatten, ohne Freunde hinzuzufügen
Eigentlich ist das ganz einfach. Wir fügen ein a-...
Eine kurze Analyse der Unterschiede zwischen px, rem, em, vh und vw in CSS
Absolute Länge px px ist der Pixelwert, also eine...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows
In diesem Artikel finden Sie das grafische Tutori...
Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem
Ich habe Vue und Bootstrap verwendet, um ein rela...
Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen
Nginx entscheidet zunächst, welcher Serverblock i...
Detaillierte Erklärung des Unterschieds zwischen der IE8-Kompatibilitätsansicht (IE7-Modus) und dem eigenständigen IE7
eins. Übersicht über die IE8-Kompatibilitätsansic...
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Inhaltsverzeichnis 1. Einweg-Wertübertragung zwis...
Vue-Grundlagen MVVM, Vorlagensyntax und Datenbindung
Inhaltsverzeichnis 1. Vue-Übersicht Offizielle Vu...
Nginx-Konfiguration zum Erreichen eines Lastenausgleichs auf mehreren Servern
Nginx-Lastausgleichsserver: IP: 192.168.0.4 (Ngin...
Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität
1. Was sind CSS-Methoden? CSS methodologies könne...
Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS
Warum habe ich das verwendet? Alles begann mit de...
Vorteile von INSERT INTO SET in MySQL
Daten in MySQL-Datenbank einfügen. Bisher häufig ...
MySQL-Operator-Zusammenfassung
Inhaltsverzeichnis 1. Arithmetische Operatoren 2....
Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz
<br />Vorheriger Artikel: Webdesign-Tutorial...
JavaScript realisiert Lupen-Spezialeffekte
Der zu erzielende Effekt: Wenn die Maus auf das k...