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 :向左，而

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

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

将 float :向右。