仅当元素具有BOTH类时才应用的CSS规则

Question

假设我们有这个标记:

<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>

有没有办法只选择<div>哪个有BOTH abc和xyz类(最后一个)并覆盖它的内联宽度,使有效宽度为200px？

像这样的东西:

[selector] {
  width: 200px !important;
}

Answer 1

div.abc.xyz {
    /* rules go here */
}

......或者干脆:

.abc.xyz {
    /* rules go here */
}

另外:`.abc.xyz`比`.abc`或`.xyz`或`div`更具体,所以`!important`不是必需的. (5认同)
正是如此.有关详细信息,请参阅http://stackoverflow.com/questions/2554839/select-css-based-on-multiple-classes. (4认同)
所以,这不会选择`<div class ="abc">`因为它缺少`xyz`？ (3认同)
请注意，这与div .abc .xyz {}不同，后者适用于类xyz的对象，其父对象具有abc类，而abc类具有div作为父对象。 (3认同)

Answer 2

以下适用于具有以下两个类的所有标签

.abc.xyz {  
  width: 200px !important;
}

适用于具有以下两个类的div标签

div.abc.xyz {  
  width: 200px !important;
}

如果你想使用jQuery修改它

$(document).ready(function() {
  $("div.abc.xyz").width("200px");
});