这可能是一个愚蠢的问题,但是我在Internet上甚至在Stack Overflow上都进行了搜索,但是我无法理解该问题。该代码非常基本:

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>DOCUMENT OBJECT MODEL</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <ul>
            <li class="sameClass" style="background-color:black; color:white; margin:5px; ">ONE</li>
            <li class="sameClass" style="background-color:black; color:white; margin:5px ">TWO</li>
            <li class="sameClass" style="background-color:orange; color:red; margin:5px">THREE</li>
            <li class="sameClass" style="background-color:orange; color:red; margin:5px">FOUR & FIVE</li>
        </ul>
        <div id="getValues"></div>
        <script src="javascript.js"></script>
    </body>
</html>

CSS:
li.differentClass{
    background-color:orange;
}

JS:
var element = document.querySelector("li.sameClass");
element.className = "differentClass";

现在,脚本将更改第一个列表项的className,即可以理解。并且在样式表中,具有className“differentClass”的列表项的外观将发生更改。例如,在CSS中,我这样写:
li.differentClass{
    border:solid 5px pink;
}

这没有任何问题。但是,请看一下我的原始代码。具有className“differentClass”的列表项的背景色应更改为橙色。但这不起作用。不仅如此,“颜色”之类的属性也没有改变。

问题是什么?

最佳答案

使用此代替:

li.differentClass{
background-color:orange !important;
}

我建议阅读:css-tricks

07-24 09:44
查看更多