Question

我通过从数据库获取数据并使用模板引擎（小胡子）来动态填充ul，如下所示：

var template = '<ul class="myList"> {{#.}} ' + 
    '<li class="Foo" ' +
    'style="background-color: {{thisItemsColor}};>" ' +
        '{{someData}}' +
    '</li> ' +
'{{/.}} </ul>';

列表项的颜色存储在DB中。问题是现在我想将hover属性更改为其他颜色。我无法通过css文件执行此操作，因为在标记中我直接在元素上设置该属性，所以我这样做：

.myList .Foo:hover {
    background-color:#000033 !important;
}

这是可接受的还是我应该使用js / jquery来应用这个伪选择器？

Answer 1

要回答这个问题，最好回到一开始就不鼓励!important的原因：主要是为了使你的css的行为可预测和可扩展，而不必检查每一个类对于!important代码。

我的意见是，这正是!important 为设计的用例。如果我在你的情况下，我会通过JavaScript使用它来进行任何内联样式操作，尽管我会通过调用类似.enforced-hover-highlight的内容来使自己难以滥用CSS类。

Answer 2

我说去吧！

我很确定你唯一的另一个选择是使用JavaScript在悬停时应用第二个内联样式，这更糟糕的是IMO。除了IE的旧版本没有在:hover上注册<li>，所以如果你想支持它们，你可能还需要这样做。

Answer 3

通常，如果元素的样式必然会发生变化，那么应该避免给它任何内联样式，并且只依赖于CSS选择器。

style中指定的内容定义了呈现元素时的样式。它不包含多个状态或选择器的概念。它具有比标准CSS声明更高的特异性。这允许使用javascript动态修改DOM。

因此，当您为li元素创建内联样式声明时，您将覆盖Foo中定义的CSS声明，包括其伪类。

因此，在您的方案中，您只剩下几个解决方案，没有一个是完全理想的

使用!important：这会有效，但如果您经常在其他地方使用该课程，可能最终会有不必要的覆盖时间
使用javascript改变内联样式：

el.onmouseover = function(){this.style.background="..."};

el.onmouseleave = function(){...};

这也有一些明显的缺点。

因此，如果你有来放置内联声明我也会选择1.并确保我的选择器非常具体。

相关问题：CSS Pseudo-classes with inline styles

在这种情况下使用！important指令是否可以接受？

3 个答案: