爲什麼自定義樣式不覆蓋以前定義的樣式

我正在開發一個網頁，該網頁添加第一個bootstrap.css，然後添加custom.css。這兩個CSS文件定義了一個名爲.container風格，這種方式：爲什麼自定義樣式不覆蓋以前定義的樣式

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; 
}

在custom.css：

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

當運行應用程序，風格的1245線bootstrap.css控制寬度。當我禁用它時，使用第1082行的樣式。最後，當我禁用時，使用第928行的樣式。當我禁用後者時，將使用custom.css中的定義。

但是，這個相同的結構和CSS在本頁面：https://colorlib.com/polygon/gentelella/index.html。在這個頁面中，相同的定義起作用。

請不要在custom.css中使用！important，因爲如果上面鏈接中的結構相同，就意味着其他的東西是錯誤的。

如果你很好奇，這是我包括CSS文件：

<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"/>

這是身體的一部分：

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

什麼可能是錯誤的？

來源

2017-06-17 jstuardo

您好..覆蓋您的自定義CSS最大寬度屬性..並給予一試。設置最大寬度：100％; –

是的..這工程..但我想知道爲什麼在我給了鏈接的網站，custom.css的作品沒有定義最大寬度 – jstuardo

嗨..在gird.less文件中的容器有寬度屬性和bootstrap.css有最大寬度屬性。這就是當「寬度」在該網站工作時被覆蓋的原因。在這裏你需要重寫max-width屬性。 ...希望這會有所幫助.. –

一個CSS文件從頂部到底部加載。
1245行將成爲更改bootstrap.css文件中容器寬度屬性的最後一行。

編輯：增加了一個例子。
200px，但由於CSS從上到下運行，但最大寬度限制爲50px。

要記住的另一件事是max-width將總是覆蓋width是否它在它之前。

.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>

來源

2017-06-17 01:51:31

是否意味着CSS處理器逐行加載所有CSS文件，將它們存儲在某種緩衝區中，最後，最後一行中的定義是否被使用？這對我來說聽起來並不合邏輯。過程應該按照它們出現在CSS文件中的樣式定義，使用相同的順序。 – jstuardo

@jstuardo CSS規範指出，以後的規則總是會覆蓋具有相同特徵和目標的早期規則。 – Li357

@jstuardo我添加了一個例子來與我的答案。查看代碼片段。 –

你寫在底部的CSS將覆蓋先前寫CSS。

使用！重要的用CSS來給它更優先。

爲最高優先級的等級制度：

.Parent1>.Parent2>.container

來源

2017-06-17 06:27:06 Tal

爲什麼自定義樣式不覆蓋以前定義的樣式

回答

相關問題