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
Verschiedene korrekte Haltungen zur Verwendung von Umgebungsvariablen in Webpack
Inhaltsverzeichnis Schreiben Sie vor Geschäftscod...
Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist
20200804Nachtrag: Der Artikel könnte falsch sein....
So optimieren Sie Bilder, um die Website-Leistung zu verbessern
Inhaltsverzeichnis Überblick Was ist Bildkomprimi...
Implementierung der kollaborativen Nutzung von React-Komponenten
Inhaltsverzeichnis Verschachtelung Kommunikation ...
JavaScript-Grundlagenoperatoren
Inhaltsverzeichnis 1. Betreiber Zusammenfassen 1....
Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images
Hintergrund Verwenden Sie Idea mit Docker, um den...
Verwendung der MySQL-Anweisung „truncate table“
Mit der Anweisung „Truncate table“ werden alle Da...
Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten
Das Daten-URI-Schema ermöglicht es uns, Daten mith...
So kapseln Sie Axios einfach in Vue
Axios in Vue einfügen importiere Axios von „Axios...
Einführung in die Parameter und Regeln für reguläre Ausdrücke bei Nginx
Vorwort In letzter Zeit habe ich Kunden dabei geh...
Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Tutorial zur Installation und Konfiguration von MySql5.7 in Alibaba Cloud ECS centos6.8
Die Standard-MySQL-Version unter dem Alibaba Clou...
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
Löschen von zwei Bildern mit derselben ID im Docker
Als ich heute einen Docker-Container erstellt hab...
Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien
Im Forum fragen Internetnutzer oft: „Kann ich den...