兩種不同顏色的款式

Question

是否可以為一個具有不同顏色的元素設置兩種樣式？

換句話說，假設我有以下HTML代碼：

<table class='my_table'>
<th class="style1 style2">LastName</th>
...
</table>

並遵循CSS：

.my_table th.style1 { 
    background: #aaaaaa; 
}

.my_table th.style2 { 
    background: #bbbbbb; 
} 

我知道我可以在某些條件下使用JavaScript刪除一種樣式。 但我希望有兩種風格，其中一種應該覆蓋另一種風格。 那可能嗎？

Answer 1

最后定義的樣式（不是類屬性中的類）應該應用於元素，以回答您的問題。 但是如果某處使用了！important關鍵字，那么結果可能會讓你感到非常奇怪。

Answer 2

是的，您可以在元素上使用任意數量的類。 CSS使用聲明順序和選擇器的特異性來決定哪些將被覆蓋。

例如，如果特異性相同，則使用最后一個：

.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
} 

否則，將使用最具體的（下面示例中的第一個）：

.my_table th.style1 { 
    background: #aaaaaa; 
}

.style2 { 
    background: #bbbbbb; 
}

Answer 3

是的，您可以為元素使用多個類，並應用這些類的所有樣式規則。

如果規則沖突，則最具體的規則將覆蓋另一個規則。 如果規則具有同等特定性，則適用最后一條規則。

例：

<table class="my_table">
    <tr>
        <th class="style1">Style 1</th>
        <th class="style2">Style 2</th>
        <th class="style1 style2">Style 1 and 2</th>
    </tr>
</table>

第三個單元格將從style2獲取背景，因為它在樣式表的最后定義。

演示： http ： //jsfiddle.net/jsLP5/

Answer 4

是的，您可以將多個類應用於元素，如果相同的CSS元素存在競爭定義，則會覆蓋另一個。

Answer 5

您可以擁有一般所需的樣式定義或特定元素。 使用哪一個是基於css特異性（范圍）。 你可以在這里閱讀更多內容： http ： //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 6

是的你可以

       <th class="style1 style2">LastName</th>

並且css是你的，因為它在這里描述

http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm

Answer 7

對於給定的代碼，使用的背景顏色是#bbbbbb，因為其他條件相同，因為它們在這里，后一個聲明通過級聯規則獲勝。 這意味着CSS聲明的順序。 class屬性中類名的順序並不重要。