javascript - 添加动态类时的CSS类优先级

与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

最佳答案

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

.hello {
  background-color: blue;
}

.mystyle {
  background-color: red;
}

CSS的特定性不取决于将类应用于元素的顺序，而是取决于以样式声明类的顺序。在这种情况下，先声明.hello，再声明.mystyle，这意味着.mystyle与.hello相比具有较高的特异性，因此，您将获得红色背景。