Question

我有这样的嵌套块，我不知道有多少嵌套块：

<div class="my-class">
   ...
   <div class="exclude-my-class">
      <div>
      </div>
   </div>
   <div>
      <div>
      </div>
   </div>
   ...
</div>

我想为“my-class”及其子项编写样式，但不包括“exclude-my-class”及其子使用css 。我不知道哪个级别可以是“exclude-my-class”类

像

这样的东西

.my-class:not(.exclude-my-class), 
.my-class *:not(.exclude-my-class, .exclude-my-class *){
    //styles
}

我如何实现这一目标？

Answer 1

问题是asked before。

借用this answer，你不能。 :not() pseudo-class in Selectors level 3本身非常有限。您只能将一个简单选择器作为参数传递给:not()。这意味着您一次只能传递其中任何一个：

通用选择器（*），可选择namespace
类型选择器（a，div，span，ul，li等），可选择namespace
属性选择器（[att]，[att=val]等），可选择namespace
班级选择器（.class）
ID选择器（#id）
伪类（:pseudo-class）

Answer 2

HTMl：

<div class="my-class">
   <div class="exclude-my-class">
      <div >
        Skipped
      </div>
   </div>
   <div>
      <div>
      not skipped
      </div>
   </div>   

   <div class="exclude-my-class">
      <div >
      skipped
      </div>
      <div >
      skipped
      </div>
   </div>
    <div>
      <div>
      not skipped
      </div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
</div>

CSS：如果我班级的直接孩子是我的班级，那么选择我班级孩子的所有孩子而不是孩子。

.my-class div:not(.exclude-my-class) div{
    background-color: red;
}

CSS：选择我班级的所有孩子，但不要选择具有exclude-my-class的孩子。

.my-class > div:not(.exclude-my-class){
    background-color: red;
}

Answer 3

使用以下代码

.my-class : not(.exclude-my-class)

div和它的孩子的CSS除了一个特定的孩子和那个孩子的孩子

3 个答案: