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

Posted

技术标签:

【中文标题】仅当元素具有两个类时才应用 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>

有没有办法只选择具有abcxyz 类(最后一个)的&lt;div&gt; 并覆盖其内联宽度以使有效宽度为200px?

类似这样的:

[selector] 
  width: 200px !important;

【问题讨论】:

【参考方案1】:
div.abc.xyz 
    /* rules go here */

...或者简单地说:

.abc.xyz 
    /* rules go here */

【讨论】:

另外:.abc.xyz.abc.xyzdiv 更具体,因此不需要 !important 所以,这不会选择&lt;div class="abc"&gt;,因为它缺少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。

以上是关于仅当元素具有两个类时才应用 CSS 规则[重复]的主要内容,如果未能解决你的问题,请参考以下文章

仅当父元素具有特定类时才为列表项元素设置样式[重复]

仅当将 2 个类设置为一个元素时才应用 CSS 规则[重复]

仅当元素具有特定子元素时才向元素添加规则

仅当有两个类并共享相同的第一个类时才选择元素

仅当元素具有两个特定类时如何在元素上触发函数

javascript:仅当父元素处于活动状态且子元素具有特定类时,如何向子元素添加属性?