Warum ein benutzerdefinierter Stil einen zuvor definierten Stil nicht überschreibt

Ich entwickle eine Webseite, die zuerst bootstrap.css und dann custom.css hinzufügt. Beide CSS-Dateien definieren einen Stil namens .Behälter, auf diese Weise:Warum ein benutzerdefinierter Stil einen zuvor definierten Stil nicht überschreibt

bootstrap.css:

container {   /* line 1245 */ 
    max-width: 1170px; 
} 
.container {   /* line 1082 */ 
    max-width: 970px; 
} 
.container {   /* line 928 */ 
    max-width: 750px; 
} 
.container {   /* line 759 */ 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
}

In custom.css:

.container { 
    padding: 0; 
    width: 100%; 
}

Wenn die Anwendung ausführen, Stil in Zeile 1245 bootstrap.css steuert die Breite. Wenn ich es deaktiviere, wird der Stil in Zeile 1082 verwendet. Schließlich, wenn ich das deaktiviere, wird der Stil in Zeile 928 verwendet. Wenn ich Letzteres deaktiviere, wird die Definition in custom.css verwendet.

Die gleiche Struktur und CSS sind jedoch auf dieser Seite: https://colorlib.com/polygon/gentelella/index.html. Auf dieser Seite funktioniert dieselbe Definition.

Bitte, schlagen Sie nicht vor, wichtig in custom.css zu verwenden, da, wenn die gleiche Struktur in der Verbindung oben funktioniert, es bedeutet, dass etwas anderes falsch ist.

Wenn Sie neugierig sind, das ist, wie ich die CSS-Dateien enthalten:

<link href="/Content/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/font-awesome.css" rel="stylesheet"/> 
<link href="/Content/nprogress.css" rel="stylesheet"/> 
<link href="/Content/iCheck/flat/green.css" rel="stylesheet"/> 
<link href="/Content/daterangepicker.css" rel="stylesheet"/> 
<link href="/Content/custom.css" rel="stylesheet"/>

Und das ist ein Teil des Körpers:

<body class="nav-md"> 
    <div class="container body">....</div> 
</body>

Was kann falsch sein?

Quelle

2017-06-17 jstuardo

hallo .. außer Kraft setzen, die max-width Eigenschaft in Ihrem benutzerdefinierten CSS .. und versucht. Max-Breite einstellen: 100%; –

ja .. das funktioniert .. aber ich frage mich, warum in der Online-Site gab ich den Link, die custom.css funktioniert, ohne die maximale Breite – jstuardo

Hallo .. Container in gird.less Datei haben Breite Eigenschaft und bootstrap.css haben Eigenschaft max-width Das ist der Grund, wenn "width" in dieser Site außer Kraft gesetzt wurde. Hier müssen Sie die Eigenschaft max-width überschreiben. ... hoffe, das hilft ... –

Nun lädt eine CSS-Datei von oben nach unten.
Die Zeile 1245 wird die letzte Zeile sein, die die Eigenschaft container width in der Datei bootstrap.css ändert.

EDIT: Ein Beispiel hinzugefügt.
200px aber max-width beschränkt es auf 50px, da CSS von oben nach unten läuft.

Eine andere Sache im Auge zu behalten ist, dass max-width wird immer Überschreibung width, ob es vor ihm kommt.

.one { 
 
    width: 50px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
} 
 
.two { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: lightgreen; 
 
    display: inline-block; 
 
} 
 
.three { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: lightgray; 
 
    display: inline-block; 
 
} 
 

 
.container { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: violet; 
 
    display: inline-block; 
 
} 
 
.container {   /* line 26 */ 
 
    max-width: 150px; 
 
} 
 
.container {   /* line 29 */ 
 
    max-width: 100px; 
 
} 
 
.container {   /* line 32 */ 
 
    max-width: 50px; 
 
}

<div class="one"><p>50px</p></div> 
 
<div class="two"><p>100px</p></div> 
 
<div class="three"><p>150px</p></div> 
 
<div class="container"><p>50px</p></div>

Quelle

2017-06-17 01:51:31

meinst du, dass der CSS-Prozessor alle CSS-Dateien Zeile für Zeile lädt, sie in einer Art Puffer speichert und schließlich die Definition in der letzten Zeile verwendet?Das klingt für mich nicht logisch. Process sollte die Stildefinitionen so speichern, wie sie in den CSS-Dateien in derselben Reihenfolge angezeigt werden. – jstuardo

@jstuardo Die CSS-Spezifikation besagt, dass eine spätere Regel eine frühere Regel immer mit derselben Spezifität und demselben Ziel überschreibt. – Li357

@jstuardo Ich habe ein Beispiel hinzugefügt, um mit meiner Antwort zu kommen. Überprüfen Sie das Code-Snippet. –

Die CSS Sie unten schreiben zuvor CSS geschrieben außer Kraft setzt.

Verwenden Sie ! Wichtig mit CSS, um ihm mehr Priorität zu geben.

Verwenden Hierarchie für höchste Priorität:

.Parent1>.Parent2>.container

Quelle

2017-06-17 06:27:06 Tal

Warum ein benutzerdefinierter Stil einen zuvor definierten Stil nicht überschreibt

Antwort

Verwandte Themen