Question

我希望div.main中的所有文本都是灰色的，除了子div.exception中的所有内容。 div.exception应该看起来好像类main从未添加到父div。

这可能吗？如果是这样，怎么样？谢谢！

<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
 <div>
  <div class="exception"><p class="hello">Hello</p><a>Link</a></div>
 </div>
 <div><p>Howdy</p></div>
 <div><a>Link</a></div>
</div>

Answer 1

对于现代浏览器，只需将规则应用于每个div，但.exception

.main div:not(.exception) p {
    /* style for very nested div not exception */
}

否则稍后覆盖规则（由@jacktheripper建议）

Answer 2

这只需通过以下方式完成：

.main .exception {
    your styling here (e.g. color: black)
}

请参阅此jsFiddle example

当您要选择上面的两个父母时，您无法使用color: inherit，因为这会仅选择直接父级。因此，您必须覆盖“手动”颜色

@F。 Calderan的答案是另一种选择，但浏览器支持是可变的

Answer 3

不，那是不可能的。

您可以轻松覆盖样式，使其看起来不是灰色，但您必须知道原始颜色是什么：

.main .exception { color: black; }

如果要在main元素上直接设置内部元素的样式，并在同一级别设置异常类，则可以使用inheit覆盖它：

<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
  <div class="exception">
    <div><p class="hello">Hello</p><a>Link</a></div>
  </div>
  <div><p>Howdy</p></div>
  <div><a>Link</a></div>
</div>

从单个元素中删除CSS效果

3 个答案: