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

Posted 2023-03-06

【中文标题】仅当元素具有两个类时才应用 CSS 规则[重复]

【英文标题】：CSS rule to apply only if element has BOTH classes [duplicate]

【发布时间】：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 */

【讨论】：

另外：.abc.xyz 比 .abc 或 .xyz 或 div 更具体，因此不需要 !important。

所以，这不会选择<div class="abc">，因为它缺少xyz？

正是如此。您可以查看***.com/questions/2554839/… 了解更多信息。

@Jan.如果有内联样式，则 !important 是必要的。 OP 问题中的内联样式将覆盖 CSS 类。

请注意，这与 div .abc .xyz 不同，后者适用于类 xyz 的对象，其父类具有 abc 类，而 abc 类具有 div 作为父类。

【参考方案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。