css - 从单个元素中移除 CSS 效果

Question

除了子 div.exception 中的所有内容，我想将 div.main 中的所有文本设为灰色。 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

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

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

否则稍后会覆盖规则(如@jacktheripper 所建议)