这可能是一个愚蠢的问题,但是我在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