使用多个类时将使用哪个CSS类？

Question

我需要在悬停或选择时创建一系列改变颜色的圆圈，使用jquery我尝试这样做。

我有评级圈的样式，选择为绿色，悬停为黄色，任何人都可以解释为什么两个圈子变成绿色？

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

Answer 1

正如我评论的那样，这取决于您在CSS中声明class的顺序，例如，如果您有类似下面代码的简单内容。

<强> 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;
}

此处，无论您在HTML文档中的元素上声明类的顺序，两个文本都将为green。

Demo