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
Zwei Methoden zur Implementierung der MySQL-Gruppenzählung und Bereichsaggregation
Der erste: Normalbetrieb WÄHLEN SUM(ddd) AS Anzah...
MySQL-Implementierung für pessimistisches und optimistisches Sperren
Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....
Mehrere Techniken zum Abspielen von Sounds mit CSS
CSS ist der Bereich von Stil, Layout und Präsenta...
Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen
1. Indizes speichern keine Nullwerte Genauer gesa...
Ist es notwendig, einen separaten Index für die MySQL-Partitionsfeldspalte zu erstellen?
Vorwort Jeder weiß, dass das Partitionsfeld Teil ...
CSS fängt die Zeichenfolge mit der angegebenen Länge automatisch ab und zeigt das Ende an ... Unterstützt den FF-Browser
<style type="text/css"> Code kopie...
JavaScript-Farbbetrachter
In diesem Artikelbeispiel wird der spezifische Ja...
JS implementiert das Lehrplan-Stundenplan-Applet (imitiert den Super-Lehrplan) und fügt eine benutzerdefinierte Hintergrundfunktion hinzu
Überblick: Ich habe aus mehreren auf dem Markt er...
Detaillierte Erklärung der KeepAlive-Anwendungsfälle in Vue
Bei der Entwicklung ist es häufig erforderlich, d...
Lösen Sie das Problem, dass MySQL „not in“ verwendet, um Nullwerte einzuschließen
Beachten! ! ! Wählen Sie * vom Benutzer, wobei di...
Wichtige Probleme und Lösungen zur Zugriffsgeschwindigkeit auf Webseiten
<br /> Die Zugriffsgeschwindigkeit einer Web...
JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts
Verwenden Sie Leinwand, um eine bunte Uhr zu schr...
Detaillierte Erläuterung der Konfigurationsmethode des Vue-Anforderungs-Interceptors
Befolgen Sie die nachstehenden Schritte 1. Inhalt...
5 Möglichkeiten, den diagonalen Kopfzeileneffekt in der Tabelle zu erzielen
Jeder muss mit Tabellen vertraut sein. Wir stoßen...
Fügen Sie dem Vortag des Website-Codeblocks den Code für die Schaltfläche „Code kopieren“ hinzu
In Bezug auf andere, professionellere Blogsysteme...