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

Question

我有以下HTML元素:

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

我想申请风格innerClass这是类:class1,class2,class3不多不少.我的意思是,如果有innerClass与类元素class1,class2风格should't被应用,如果我有innerClass与类元素class1,class2,class3,class4它也不应适用.

Answer 1

您可以使用CSS属性选择器执行此操作

[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解决方案.

Answer 2

您可以像这样组合这些类：

.class1.class2.class3 .innerClass {

}