CSS Combine Class＆amp;样式

Question

我有一个表行，它有一个类应用于它。根据该行中设置的值，我可以直接使用行中的样式更改背景颜色。

$bground = ($a === 'a') ? '#A0A0A0' : '#ffffff';

<tr class='$class' align='center' style='background-color:$bground '>

添加样式会停止应用于页面的其他css。例如：以下停止工作。

.res table tr:hover {
    background-color: #808080;
}

.res table tr.selected {
    background-color: #808080;
}

如果我从行中删除style='background-color:$bground '>，则悬停并按预期选择。

有什么办法吗？

由于

Answer 1

首先，背景颜色可以缩短为背景，如下所示：.className {background: #fff}

接下来，您可以将dupe样式组合起来：

.classOne, .classTwo, #idOne {background: #fff;}

接下来，不要分配任何内联js或css。这种不好的做法导致难以维护代码。只需在其上添加一个新的id / class。

最后，分配内联css停止样式表的原因是因为内联css具有更高的特异性值。在样式表中，您可以使用元素添加权重：

div.classOne.someOtherClassItHas {background: #fff;}

如果这没有足够的提升，你可以随时添加!important规则，这有助于阻止覆盖：

.class {background: #fff !important;}

虽然谨慎地使用这个并且作为最后的手段（我建议将任何重要规则移到样式表的底部），因为它可能会混淆样式表的行为。

Answer 2

没有。内联样式始终覆盖CSS。由于您已通过内联样式设置背景颜色，因此无法使用CSS更改它。

此问题的解决方案是使用内联样式更改背景颜色，而不是将另一个类添加到tr，后者具有不同的背景颜色规则。

.res table tr.color1 {
background-color: #A0A0A0;
}

.res table tr.color2 {
background-color: #ffffff;
}

然后在您的代码中，将类添加到tr：

$bgroundClass = ($a === 'a') ? 'color1' : 'color2';

<tr class='$class $bgroundClass' align='center'>