javascript - 为什么通过 JavaScript 更改背景颜色会覆盖对象上的所有 CSS 选择器？

Question

只是一个简单的问题......如果我有以下 CSS，它是怎么回事:

li { background:red; }
li:hover { background:blue; }

使用以下 JS(或类似的东西):

document.getElementsByTagName("li")[0].style.backgroundColor="yellow";

当我将鼠标悬停在列表元素上时，我的列表元素不再变为蓝色？我已经在 Chrome 和 FF 上测试过了。例子可以在这里看到:http://jsfiddle.net/42bQr/ .有什么想法吗？

Answer 1

这是因为内联样式更具体，您可以使用以下内容覆盖内联样式:

li:hover { background:blue !important; }