Question

我试图更改:hover选择器中.box div的颜色，我只能在我旁边放一个!important标志时才能使用它CSS规则。有没有更简洁的方法呢？

<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
    .box:hover {
        background-color:blue;
    }
</style>
</head>
<body onload="init()">
<script type="text/javascript">
    function init() {
        for (var i=0;i<500;i++) {
            document.body.innerHTML += "<div class='box' style='display:block;width:100px;height:100px;background-color:red;float:left;'></div>";
        }
    }
</script>
</body>

</html>

Answer 1

style="..."属性中定义的样式具有比样式表中定义的任何内容更高的特异性。

您应该改为定义这样的样式：

<style>
    .box {
        display:block;
        width:100px;
        height:100px;
        background-color:red;
        display:inline-block; /* better than float:left for your usage */
    }
    .box:hover {background-color:blue}
</style>

您也不应将+=与.innerHTML一起使用。

for( var i=0; i<500; i++) {
    document.body.appendChild(document.createElement('div')).className = "box";
}

Answer 2

不要使用内联样式。请尝试以下内容...

<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
    .box{
       display:block;
       width:100px;
       height:100px;
       background-color:red;
       float:left;
     }
    .box:hover {
       background-color:blue;
    }
</style>
</head>
<body onload="init()">
<h1>HELLO!</h1>
<script type="text/javascript">
function init() {
    for (var i=0;i<500;i++) {
      document.body.innerHTML += "<div class='box'></div>";
    }
    var content = document.getElementById('styles').innerHTML;
    document.getElementById('styles').innerHTML = content;
}
</script>
</body>

</html>

注意：从脚本应用样式时，只能使用！important覆盖它。

如何在JS生成的内容上使用样式

2 个答案: