Приоритет класса Css при добавлении динамического класса

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 ... , что деление с оба класса ... Когда ваши классы были добавлены приоритет .myStyle класса вверх от .hello ...

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

</style> 

here you can see working example