覆盖CSS类

Question

我在我的javascript文件中创建了一些类，这些类在CSS文件中基本上被引用为＆＃34; tr.Yes＆＃34; ＆＃34; tr.No＆＃34;和新的＆＃34; tr.override＆＃34;。

由于JS文件中添加了一些约束，我想用tr.override覆盖tr.Yes和tr.No的值。基本上，我如何使用背景为绿色的tr.override覆盖它们？

谢谢你们。

到目前为止我的CSS看起来如下：

tr.Yes td.IndicatedDispatch {
background: yellow;
}

tr.No td.IndicatedDispatch {
background: red;
}

Answer 1

如果您希望override类覆盖yes和no类，请在CSS文件中的其他类之后定义override类，并重新定义相同的规则不同的价值观。

喜欢这个

tr.Yes td.IndicatedDispatch {
background: red;
}

tr.Override td.IndicatedDispatch {
background: green; /* Redefine here*/
}

Answer 2

您可以通过使CSS声明更具体来覆盖它们。向上移动DOM。

tr.Yes td.IndicatedDispatch {
  background: yellow;
}

变为：

table tr.Yes td.IndicatedDispatch {
  background: red;
}

相关文章：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

如果您要添加覆盖类并保留原始类，则可以创建如下组合规则：

tr.Yes td.IndicatedDispatch {
    background: yellow;
}

tr.No td.IndicatedDispatch {
    background: red;
}

tr.Yes.override td.IndicatedDispatch , 
tr.No.override td.IndicatedDispatch {
    background: green;
}

Answer 4

CSS从上到下工作，即selector1 css属性将被最后定义的selector1 css属性覆盖（MORE SPECIFIC）。例如

.myClass{
color: #000000;
}
/*
* Some other code
* 
*/

.myClass{
color: #FFFFFF;
}

因此，在运行时{@ 1}}将会选择颜色。

Answer 5

您可以将选择器更改为tr.Yes:not(.override)，以便在覆盖类生效时它们不会生效。否则，tr.Yes和tr.override样式都将合并，tr.Yes中未被tr.override覆盖的任何内容都将保留。