如果层次结构包含元素，则不应用CSS选择器？

Question

我希望在页面的某个部分应用几十个CSS规则 - 这部分很简单：

.generalStyles a,p,button,div.foo {
  /* many styling rules here*/
}

但是，当我使用class="generalStyles"标记页面的某个部分时，我希望某些子部分不要继承这些样式，例如class="noGeneralStyles"（1）的后代。这应该适用于任意嵌套。

我正在寻找的是一个可以翻译成的选择器：

  

如果您是.generalStyles的后代，则继承CSS规则，但不是   当.noGeneralStyles是一个更亲密的父母

可以找到交互式jsFiddle示例here

编辑：解决方案（如果有的话）不应该对内部HTML进行任何假设

---

（1） - 原因是复制的CSS规则太多了

Answer 1

由于给定here和here的原因，您无法单独使用选择器来限制或以其他方式控制继承链，甚至不能通过组合:not()和后代选择器来控制继承链。您必须为.generalStyles .noGeneralStyles中的元素提供最重要的规则。

Answer 2

使用直接后代选择器怎么样？ >表示会选择button代码，direct代表noGeneralStyles或generalStyles

的元素

Demo

.noGeneralStyles > button {
    color: black;
}
.generalStyles > button {
    color: red;
}