Question

我有一堆div任意嵌套：

<div>
  <div>
    <div>Apple</div>
    <div>
      <div>Banana</div>
      <div>Grape</div>
    </div>
  </div>
  <div>Craisin</div>
</div>

我用这样的规则制作粉红色的内容：

div { color: pink; }

我希望能够将special类添加到其中任何一个div中，以取消粉红色规则及其所有子项。例如，如果我将special类添加到此 div，

<div>
  <div class="special">
    <div>Apple</div>
    <div>
      <div>Banana</div>
      <div>Grape</div>
    </div>
  </div>
  <div>Craisin</div>
</div>

然后“苹果”，“香蕉”和“葡萄”不再是粉红色。

我是否可以调整规则以仅匹配未嵌套在.special内的div？

我不是在寻找解决方案，而是要为.special编写一条规则，取消div上定义的每种风格。例如，即使它有效，这也不是一个好的解决方案：

.special, .special div { color: black !important; }

我的实际样式比仅更改颜色更复杂，还有其他规则，如div span，我也想用special类禁用选择器。

Answer 1

您不能阻止子/后代使用CSS继承可继承的样式属性。

必须明确重置后代的样式属性。

选择器匹配未嵌套在另一个选择器中的元素？

1 个答案: