Какой класс CSS будет использоваться при использовании нескольких классов?

Question

Мне нужно создать серию кругов, меняющих цвет при наведении или выборе, используя jquery, я пытаюсь это сделать.

У меня есть стили для кругов оценки, выбран зеленый, наведите желтый цвет, может ли кто-нибудь объяснить, почему оба круга становятся зелеными?

<div class="rating-circle rating-chosen rating-hover"></div> 
<div class="rating-circle rating-hover rating-chosen"></div> 

Answer 1

Как я заметил, это зависит, в каком порядке вы объявили свой class в CSS, например, если у вас есть что-то простое, как код ниже ..

HTML

<div class="rating-circle rating-chosen rating-hover">test</div> 
<div class="rating-circle rating-hover rating-chosen">test</div> 

CSS

.rating-chosen { 
    color: red; 
} 

.rating-hover { 
    color: green; 
} 

Здесь оба текста будут green независимо от того, в каком порядке вы объявляете свои классы по элементам в документе HTML.

Demo