Kann Bootstrap den Stil ändern?

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 (z. B.: Klasse)

3. ID-Selektor (z. B.: id)

4. Globaler Selektor (z. B.: * Nummer)

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

6. Nachkommen-Selektor (zum Beispiel: #head .nav ul li Selektor vom übergeordneten Satz zum untergeordneten Satz)

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

8. Bitte beachten Sie, dass der Selektor erbt dass die beiden Selektoren die Leertaste verwenden)

9. Pseudoklassenselektor (zum Beispiel: Es ist der Linkstil, die Pseudoklasse des a-Elements, 4 verschiedene Zustände: Link, besucht, aktiv , Hover.)

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

11 ;p, mit Größer-als-Zeichen>)

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

Verwandte Empfehlungen: „Bootstrap Erste Schritte Tutorial"

2. Priorität

Bei Verwendung der !important-Regel für eine Stildeklaration überschreibt die Stildeklaration alle anderen Deklarationen in CSS. IE6 tut dies 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-Selektor #id{margin:0;} den Klassenselektor .classname{margin:3pxl}.

Der Klassenselektor hat eine Gewichtung von 10; er wird durch einen oder mehrere Klassenselektoren, Attributselektoren und Pseudoklassenselektoren definiert. Beispielsweise deckt .classname{margin:3px} div{margin:6px;} ab.

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

Platzhalterauswahl: wie *{marigin:6px;}.

Die Browseranpassungs- oder Vererbungsgewichtung beträgt 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.

Abfragelektion:

Verwenden Sie niemals !important in Site-weitem CSS.

Verwenden Sie !important nur auf bestimmten Seiten, auf denen Sie Site-weites oder externes CSS überschreiben müssen (z. B. referenzierte ExtJs oder YUI).

Verwenden Sie niemals !important in Ihren Plugins.

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

Das obige ist der detaillierte Inhalt vonKann Bootstrap den Stil ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!