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

Question

我想在页面的某个部分应用数十条 CSS 规则 - 这部分很简单：

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

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

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

如果您是 .generalStyles 的后代，则继承 CSS 规则，但不是当 .noGeneralStyles 是更接近的父级时

可以在此处找到交互式 jsFiddle 示例

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

---

(1) - 原因是有太多的 CSS 规则需要重置

Answer 1

You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.

Answer 2

使用直接后代选择器怎么样？>意味着它将选择button标签，该标签是direct具有类noGeneralStyles或元素的子元素generalStyles

演示

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