在一個文件中優先考慮CSS設置高於其他文件中的那些文件

Question

問題很簡單。是否可以確保主HTML中包含的兩個文件之間的競爭或衝突的CSS屬性得到解決，以支持這兩個文件之一中的設置。

，如果我有

<link href="A.css" rel="stylesheet" type="text/css"> 
<link href="B.css" rel="stylesheet" type="text/css"> 

和一個包含有類似

body{ 
    color: #ffffff; 
} 

，而B包含

body{ 
    color: #000000; 
} 

我可以以某種方式表明，每一個存在於兩個文件中的設置得到它的財產，比如說一個文件？

做一些像SASS或LESS這樣的引擎是否允許這樣做？

Answer 1

在A文件中，可能會使用！important？我不知道這是否可以跨CSS文件工作，但你可以試試這個。

body{ 
    color: #ffffff !important; 
} 

我聽說最好避免不惜一切代價使用它，但它可能適用於您。有一個答案here，解釋了爲什麼不使用重要和何時使用它。

Answer 2

CSS代表層疊樣式表 - 意味着最後的規則總是會在開始時推翻規則。因此，瀏覽器將首先解釋來自A.css的規則並應用它們，然後解釋來自B.css的規則並應用它們，覆蓋A.css中的規則。

如果您將規則寫入單個文件，則會發生同樣的情況。

因此，例如：

body { 
    background-color: red; 
} 

body { 
    background-color: blue; 
} 

將返回background-color藍色。如果將樣式分成多個電子表格或將其寫入一個文件中，則會發生同樣的情況。

在這裏，您可以閱讀更多關於Cascading and inheritance。

SASS或LESS不能改變這一點，因爲它們被編譯成CSS - 所以任何不可能用CSS做的事情都不能用SASS/LESS來完成。基本上他們是一個工具，可以幫助您編寫更高效的代碼，然後將其編譯爲CSS。

您可以指定樣式表僅在標記中的某些設置（例如僅在移動設備上）應用樣式表，或者您可以使用!important CSS屬性標記您始終要應用的規則。