5

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

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

列表项的颜色存储在数据库中。现在的问题是我想将悬停属性更改为不同的颜色。我不能通过 css 文件执行此操作，因为在标记中我直接在元素上设置该属性，所以我这样做：

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

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

4

3 回答 3

4

要回答这个问题，最好回到!important最初不鼓励使用的原因：本质上是为了使您的 css 的行为可预测和可扩展，而无需检查每个类的!important标签。

我的观点是，这正是设计的用!important 例。如果我处于您的情况，我会在通过 JavaScript 进行的任何内联样式操作上使用它，尽管我会让自己很难通过将 CSS 类称为.enforced-hover-highlight.

于 2014-06-23T19:12:31.467 回答
1

我说去吧！

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

于 2014-06-23T18:35:32.313 回答
0

通常，如果一个元素的样式注定要改变，应该避免给它任何内联样式，而只依赖 CSS 选择器。

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

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

所以在你的场景中，你有几个解决方案，没有一个是完全理想的

  1. 使用!important：这将起作用，但如果您经常在其他地方使用该类，您最终可能会随着时间的推移而出现不需要的覆盖

  2. 使用 javascript 更改内联样式：

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

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

这也有一些明显的缺点。

因此，如果您必须放入内联声明，我也会选择 1.，并确保我的选择器非常具体。

相关问题：具有内联样式的 CSS 伪类

于 2014-06-23T19:12:02.963 回答