html - 具有多个类的 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。