浏览器误读了多个类的Div

Question

我有一个HTML代码

<div class="required-fields group-summary field-group-html-element">testing</div>

我还包括一个css

div.group-summary { float:right;}

但它不起作用。

但是，如果我尝试：

div.required-fields.group-summary.field-group-html-element { float:right;}

然后它工作得很好。有什么我想念的东西。看起来很简单，我无法相信问题出在哪里。

Answer 1

第二个规则div.required-fields.group-summary.field-group-html-element比第一个规则更具体，可能会覆盖第三个相反规则，该规则比第一个规则更具体但比第二个规则更不具体，例如：

div.group-summary {
    float:right;
}

div.required-fields.group-summary {
    float: left;
}

将float: left，而

div.required-fields.group-summary {
    float: left;
}

div.required-fields.group-summary.field-group-html-element {
    float:right;
}

将float: right。