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属性选择器

执行此操作

[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在评论中指出的那样，此方法假定类的顺序是准确的，因此在订单如下时不起作用：{{ 1}}。解决此问题的一种方法是在规则中添加可能的每个订单组合，如下所示：

class="class2 class3 class1"

但正如您所看到的，这效率不高，因此您必须确保订单正确或使用javascript解决方案。

Answer 2

如果类的顺序非常随机，您可以使用以下方法对其进行过滤：

$('.class1.class2.class3').filter(function(){
   return this.classList.length === 3;
}).find('.innerClass').css({prop: value});

您可以找到有关classList支持的旧浏览器的polyfill，或者只是拆分className。

Answer 3

你要像这样组合这些类：

.class1.class2.class3 .innerClass {

}

Answer 4

Aziz在我看来发布了最好的答案，但这是另一种方法。

.class1.class2.class3:not(.class4) .innerClass {
       /* Style here */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

这仅受IE9 +

支持

Answer 5

在这里。有一个问题，你可以注意到第3个方格＆＃39;相同的混合＆＃39;：只有在这个订单上写了这个类时它才有效。

＆＃13;

div[class='class1 class2 class3'] > .innerClass { 
  background-color: gold;
}

.innerClass {
  margin:5px;
  width:100px; 
  height:100px;
  float:left
}

＆＃13;

<div class="class1 class2">  
<div class="innerClass" style="outline:2px solid black">one class less</div>
</div>

<div class="class1 class2 class3">
<div class="innerClass" style="outline:2px solid black">exact classes</div>
</div>

<div class="class2 class3 class1">
<div class="innerClass" style="outline:2px solid black">same mixed</div>
</div>

<div class="class1 class2 class3 class4">
<div class="innerClass" style="outline:2px solid black">one class more</div>
</div>

＆＃13;

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

5 个答案: