jquery - 如何将CSS样式应用于另一个类中的类？

Question

我有以下 HTML 元素:

<div class="class1 class2 class3">
    <div class="innerClass">
    </div>
</div>

我想将样式应用于类中的 innerClass : class1, class2 , class3 不再不少于。我的意思是，如果元素中有 innerClass 类 class1，class2 则不应应用样式，如果我有 innerClass 在类为 class1, class2 , class3 , class4 的元素中也不应该被应用。

Answer 1

您可以使用 CSS 属性选择器

The [attribute] selector is used to select elements with a specified attribute.

div[class="class1 class2 class3"] .inner {padding:1em; background:red;}

<div class="class1 class2 class3">
  <div class="inner"></div>
</div>

<div class="class1 class2 class3 class4">
  <div class="inner"></div>
</div>

<div class="class3 class4">
  <div class="inner"></div>
</div>

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors (添加者:Chris Bier)

---

编辑: 正如 Sidney Liebrand 的评论中指出的那样，此方法假定类的顺序是准确的，因此当顺序如下时将不起作用:class="class2 class3 class1"。解决这个问题的一种方法是在规则中添加每个可能的订单组合，如下所示:

div[class="class1 class2 class3"] .inner,
div[class="class1 class3 class2"] .inner,
div[class="class2 class1 class3"] .inner,
div[class="class2 class3 class1"] .inner,
div[class="class3 class1 class2"] .inner,
div[class="class3 class2 class1"] .inner {
 padding:1em; background:red;
}

但如您所见，这根本效率不高，因此您必须确保顺序正确或求助于 javascript 解决方案。