重写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/