CSS 组合类和样式

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

首先 background-color 可以像这样缩短为背景:.className {background: #fff}

接下来，您可以像这样组合重复的样式:

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

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

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

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

如果这还不够，您可以随时添加 !important 规则来帮助停止覆盖:

.class {background: #fff !important;}

尽管作为最后的手段谨慎使用它(我建议将任何 !important 规则移动到样式表的底部)，因为它可能会扰乱样式表的行为。