2

我想让 div.main 中的所有文本都变成灰色，除了子 div.exception 中的所有内容。div.exception 应该看起来好像主类从未添加到父 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>
4

3 回答 3

5

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

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

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

于 2012-04-16T14:08:44.357 回答
2

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

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

请参阅此jsFiddle 示例

color: inherit当您想在上面选择两个父级时，您不能使用它，因为它只选择直接父级。因此，您必须“手动”覆盖颜色

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

于 2012-04-16T14:06:03.570 回答
1

不，那是不可能的。

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

.main .exception { color: black; }

如果您要直接在内部元素上设置样式而不是在主元素上设置样式，并将异常类设置在同一级别，则可以使用以下方法覆盖它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>
于 2012-04-16T14:09:45.090 回答