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
Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12
In diesem Artikel finden Sie das Installations-Tu...
WML-Tag-Zusammenfassung
Strukturbezogene Tags ----------------------------...
So implementieren Sie die Stapellöschung großer Datenmengen in großen MySQL-Tabellen
Die Frage wird zitiert von: https://www.zhihu.com...
Offlineinstallation von Centos7.2 mysql5.7.18.tar.gz
Aufgrund der Netzwerkisolation kann MySQL nicht m...
HTML-Auszeichnungssprache - Tabellen-Tag
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
So erkennen Sie die Dateisystemintegrität basierend auf AIDE in Linux
1. HILFE AIDE (Advanced Intrusion Detection Envir...
Detaillierte Schritte zur Dateisteuerungsverwaltung für Linux-Konten
Im Linux-System gibt es neben den verschiedenen, ...
CSS3-Randeffekte
Was ist CSS? CSS (Abkürzung für Cascading Style S...
Lernen Sie, benutzerdefinierte Hooks in React zu erstellen
1. Was sind benutzerdefinierte Hooks Wiederverwen...
MySQL SQL-Anweisungsmethode zum Ausblenden der mittleren vier Ziffern der Mobiltelefonnummer
Erste Abfragetabellenstruktur (sys_users): WÄHLEN...
Zusammenfassung der 10 wichtigsten JavaScript-Interviewfragen (empfohlen)
1.Dies deutet auf 1. Wer ruft wen an? Beispiel: F...
Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen
Inhaltsverzeichnis Allgemeine MySQL-Funktionen 1....
Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile
Inhaltsverzeichnis Vorwort Prototypische Vererbun...
So installieren Sie eine MySQL-Datenbank im Deepin 2014-System
Deepin 2014 herunterladen und installieren Zum He...
Sehr detaillierte Anleitung zum Upgrade der MySQL-Version
Inhaltsverzeichnis 1. Einleitung 2. Sichern Sie d...