瀏覽器如何解決衝突的類？

Question

我知道這是可能在HTML中指定一個元素的多個類：

<div class='one two'>Text</div> 

好像類是一個字符串從Javascript訪問。

當類指定了衝突的屬性時會發生什麼？例如

div.one { 
    background-color: red; 
    color: blue; 
} 
div.two { 
    background-color: green; 
} 

結果將取決於指定類的順序嗎？例如，我是否可以合理地期望上面的div顯示爲藍色文本和綠色背景，因爲two類會被第二次評估，覆蓋background-color屬性？

Answer 1

閱讀有關特異性：

• Simple explanation
• More in depth explanation

簡短回答：如果兩個選擇器具有相同的特徵，則最後一個要聲明的勝利。

Answer 2

http://jsfiddle.net/mrtsherman/2NpXS/

取決於樣式表的順序。稍後的樣式聲明優先。你可以反轉兩個CSS行來查看。

Answer 3

如果選擇器具有same level of precedence（如它們在此處所做的那樣），則以指定者後面的爲優先。在這種情況下，背景應爲綠色，但字體顏色爲藍色。

從CSS spec：

最後，排序指定順序：如果兩個聲明具有相同的重量 ，起源和特殊性，後者指定的勝利。 導入的樣式表中的聲明被認爲是在樣式表本身的任何 聲明之前。

Answer 4

你用什麼樣式來稱呼「級聯樣式表」。級聯部分意味着它就像一個瀑布，未來的規則建立在（或覆蓋）以前的規則上。因此，第二條規則將覆蓋背景顏色屬性，但它仍將保留字體顏色。

（注意與優先順序，雖然，那熄滅的ID具有更高的優先級高於一個熄滅的一類，而不管他們的位置的規則。）

Answer 5

CSS有一個非常明確的順序優先。

在這樣的情況下，如果其他條件相同且優先級相同，則瀏覽器應該選擇樣式表中最後定義的樣式。

在您給出的示例中，這意味着div.two樣式將覆蓋div.one，其中在兩個樣式中都定義了相同的屬性。

順便說一句，這也是相同的功能，允許您在相同的選擇器中使用相同的屬性定義多個樣式，以支持不同的瀏覽器功能。例如，一些瀏覽器可能不支持RGBA顏色，這樣你就可以做到以下幾點：

.myclass { 
    background: rgb(200, 54, 54); 
    background: rgba(200, 54, 54, 0.5); 
} 

所有的瀏覽器會選擇最後background聲明他們支持，所以支持rgba瀏覽器會選擇第二個，而瀏覽器那不會，會做第一個。

這也是爲什麼當您使用供應商前綴樣式時，您還應該在前綴版本之後指定非前綴版本，以便當供應商的瀏覽器確實開始支持非前綴版本的風格，你可以肯定它會使用它而不是前綴版本（它可能不支持最終版本的所有功能）。

Answer 6

結果取決於類是在指定的順序

這裏是爲了在其中CSS規則執行的好寫了。 http://htmlhelp.com/reference/css/structure.html