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

【问题标题】：CSS selectors that is not applied if hierarchy contains an element?如果层次结构包含元素，则不应用 CSS 选择器？
【发布时间】：2013-09-05 16:16:04
【问题描述】：

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

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

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

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

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

一个交互式jsFiddle示例可以找到here

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

这很容易出现“无限循环”——.generalStyles .noGeneralStyles .generalStyles 需要另一套规则吗？不过，我担心您的回答可能是正确的，而且 CSS 还没有准备好进行“小部件”类型开发
@user2394179：是的，很遗憾。没有办法指定两个祖先更接近一个特定的后代——这不是选择器的工作方式。未来的规范将允许您使用属性语法阻止特定或（几乎）所有属性的继承 - 请参阅 here - 但实现实现还需要很长时间。
只是好奇，他是如何在他的小提琴中嵌套样式的？编辑：我现在看到了，SCSS 呵呵，我期待在外部资源中

【解决方案2】：

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

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

【讨论】：