So ersetzen Sie Stile im Bootstrap

Standardstil von Bootstrap ändern

Ich habe Bootstrap schon lange nicht mehr verwendet und es vergessen Ändern Sie den Stil entsprechend meinen eigenen Bedürfnissen.

Ich habe gleich zu Beginn eine neue Klasse hinzugefügt und den CSS-Stil neu geschrieben, um den ursprünglichen Stil zu überschreiben, aber es hat tatsächlich nicht funktioniert. Weil die Priorität des Selektors nicht berücksichtigt wird. Einige dieser Fragen werden in Vorstellungsgesprächen gestellt, aber es ist mir nie gelungen, Theorie und Praxis miteinander zu verbinden.

Meine Lösung besteht darin, die Gewichtung durch Unterselektoren zu erhöhen. Da andere auch IDs verwenden, mag ich es nicht, Selektoren mit IDs hinzuzufügen.

Erinnern Sie sich an eine Welle von Selektoren und ihre Prioritäten.

1. CSS-Selektor

1. Tag-Selektor (z. B.: body, div, p, ul, li)

2 . Klassenselektor (zB: Klasse)

3. ID-Selektor (zB: id)

4. Globaler Selektor (zB: *-Zeichen)

5. Kombinationsselektoren (wie zum Beispiel: .head .head_logo, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind)

6 ul li Selektor vom Elternsatz zum Nachkommensatz)

7. Gruppenselektor div, span, img {color:Red} bedeutet, dass Beschriftungen mit demselben Stil in Gruppen angezeigt werden

8. Selektor erben (z. B. div p, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind)

9. Klasse eines Elements, 4 verschiedene Zustände: Link, besucht, aktiv, Hover)

10. Attributselektoren für den String-Abgleich (^$* drei Typen, entsprechend Start, Ende und Einschluss)

11. Unterselektor (z. B.: div>p, mit Größer-als-Zeichen>)

12. CSS-benachbarter Geschwisterselektor (z. B.: h1+p , mit Pluszeichen +)

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“

2. Priorität

Wenn Sie die Regel !important für eine Stildeklaration verwenden, überschreibt die Stildeklaration alle anderen Deklarationen in CSS. IE6 unterstützt dieses Attribut nicht

Das maximale Gewicht des Inline-Stylesheets beträgt 1000; das heißt, es wird ein Stil zum Element-Tag in HTML hinzugefügt, also ein Inline-Stil. Diese Methode erschwert die Verwaltung des CSS und wird daher nicht empfohlen.

Der ID-Selektor hat eine Gewichtung von 100; definiert durch einen oder mehrere ID-Selektoren. Beispielsweise überschreibt der #id{margin:0;}id-Selektor die Klasse selector.classname{margin:3pxl}

Klasse. Die Gewichtung des Klassenselektors beträgt 10; er besteht aus einem oder mehreren Klassenselektoren , Attributselektor- und Pseudoklassenselektordefinitionen. Beispielsweise deckt .classname{margin:3px} div{margin:6px;}

Tag-Selektorgewicht ist 1 ab: definiert durch einen oder mehrere Typselektoren. Beispielsweise überschreibt div{marigin:6px;} *{margin:10px;}

Wildcard-Selektor: z. B. *{marigin:6px;}

Der vom Browser benutzerdefinierte oder geerbte Gewichtungswert ist 0,1

Zusammenfassungssortierung: !important > important

Die Verwendung von !important ist eine schlechte Angewohnheit und sollte so weit wie möglich vermieden werden, da es die inhärenten Kaskadenregeln im Stylesheet bricht und das Debuggen und Finden von Fehlern erschwert. Wenn zwei widersprüchliche Deklarationen mit der !important-Regel auf dasselbe Element angewendet werden, wird die Deklaration mit der höheren Priorität verwendet.

Abfrageerfahrung:

Verwenden Sie es niemals für Site-weites CSS! Wichtig

Nur, wenn Sie die gesamte Site oder externes CSS abdecken müssen (z. B. referenzierte ExtJs oder YUI). ) auf einer bestimmten Seite !important

Verwenden Sie niemals !important

in Ihrem Plugin. Zur Optimierung sollten Sie die Stilregelpriorität verwenden, um das Problem zu lösen, anstelle von !important

Das obige ist der detaillierte Inhalt vonSo ersetzen Sie Stile im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!