仅当元素具有两个类时才应用 CSS 规则[重复]答案

【问题标题】：CSS rule to apply only if element has BOTH classes [duplicate]仅当元素具有两个类时才应用 CSS 规则[重复]
【发布时间】：2011-08-13 09:22:23
【问题描述】：

假设我们有这个标记：

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

有没有办法只选择具有abc 和xyz 类（最后一个）的<div> 并覆盖其内联宽度以使有效宽度为200px？

类似这样的：

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

【问题讨论】：

【解决方案1】：

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

...或者简单地说：

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

【讨论】：

【解决方案2】：

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

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

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

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

如果你想使用 jQuery 修改它

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

【讨论】：

【解决方案3】：

如果您需要一个程序化的解决方案，这应该可以在 jQuery 中使用：

$(".abc.xyz").css("width", 200);

【讨论】：

谢谢，看来除了我对css的掌握不好没有问题！
Jquery 在当前版本中内部使用 document.queryselector 和 document.queryselectorall。因此，如果您只使用 jquery，请使用这些而不是 jquery。