重寫CSS樣式

Question

我正在定義一些CSS類，它們在應用於表格時會生成一些默認樣式。

例如，可以說我創建一個名爲mytable的類：

.myTable { 
    th { 
    background-color: #000; 
    } 

    td { 
    background-color: #555; 
    } 
} 

所以與.myTable類中的任何表將在默認情況下得到th和td這些顏色。

我認爲，如果另一個類被分配給一個單獨的TD，那麼它將覆蓋默認樣式。

所以，如果我有另一個類：

.red { background-color: red; } 

和一張桌子：

<table class=myTable> 
    <th class="red">Content</th> 
    <td>Hello!</td> 
</table> 

我認爲「紅色」類會導致頭部的背景是紅色的，而不是黑色。事實並非如此。爲了讓這個類來替代原來的，它必須是在mytable的類中定義，像這樣：

td.red { background-color: red; } 

我失去了一些東西在這裏，有另一種方式來做到這一點，這樣我可以有默認樣式更容易被覆蓋？

Answer 1

這個想法是，使用哪種風格取決於兩件事：選擇器的特定程度，規則的位置（最新規則獲勝）。例如：

p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

段落將是藍色的。另一個例子：

body p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

由於「body p」更具體，段落將是紅色的。

編輯：也儘量避免使用！重要。它被支持，但副作用是你永遠不能覆蓋它（永遠）。因此，只有在您無法知道如何構建特定規則（例如：generic print.css）的極端情況下才能使用它。

Answer 2

有一個標準的方式來給一些樣式優先。

td.red { background-color: red !important; } 

Answer 3

這是所有使用的CSS選擇器的特殊性問題（即選擇器如何匹配任何給定的HTML元素）。選擇器越具體，其風格的優先級越高。

有關CSS選擇器特異性的深入說明，請參閱此頁：CSS Specificity: Things You Should Know。

Answer 4

有幾種方法，你可以在聲明的末尾使用!important這樣：

.red { 
    background-color: red !important; 
} 

而且，更具體的宣言，更流行的將是。因此，table.myTable td.red {}中的任何內容都會比td.red{}中的任何內容更普遍。

Answer 5

!important規則將覆蓋css中的特定屬性。

因此，在重寫屬性的情況下，你應該總是使用它的值。在

更多細節：https://css-tricks.com/when-using-important-is-the-right-choice/