Question

与css中的类的优先级相关的混淆，我知道最后添加的类具有最高优先级，但是这里在我的情况下，我认为我错了，我动态地将类添加到div，但类不能正常工作

<p>Click the button to add the "mystyle" class to DIV.</p>

<script>
    function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle","hello");
}
</script>

<style>
.hello{
background-color: blue;
}
.mystyle {
    background-color: red;
}
</style>

为什么div显示红色而不是蓝色？

Working Example

Answer 1

由于您的样式声明顺序，您的div是红色而不是蓝色：

.hello {
  background-color: blue;
}

.mystyle {
  background-color: red;
}

CSS特异性不依赖于将类应用于元素的顺序，而是依赖于在样式中声明类的顺序。在这种情况下，您已声明.hello然后.mystyle，这意味着.mystyle与.hello相比具有较高的特异性，因此您获得了红色背景。

Answer 2

这是层次结构的问题：

function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle","hello", "red-background");
}

#myDIV.hello{
background-color: blue;
}
.mystyle {
    background-color: red;
}
.mystyle {
    width: 300px;
    height: 50px;
    background-color: red;
    color: white;
    font-size: 25px;
}

<p>Click the button to add the "mystyle" class to DIV.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="myDIV">
I am a DIV element
</div>

Answer 3

因为解释器在第一次读类.hello然后是类.mystyle ... div有两个类......当你的类被添加到.mylo的优先级时。来自.hello ...

<style>
    .mystyle {
       background-color: red;
    }
   .hello{
      background-color: blue;
   }

</style>

here you can see working example

添加动态类时的Css类优先级

3 个答案: