停止 CSS 层次结构答案

【问题标题】：Stop CSS hierarchy停止 CSS 层次结构
【发布时间】：2012-11-09 16:18:06
【问题描述】：

我的层次结构如下：

<div class="outer">
    <h1>Heading</h1>
    <p>Paragraph</p>
    <p><a>Link</a></p>

    <div class="inner">
        <h1>Heading</h1>
        <p>Paragraph</p>
        <p><a>Link</a></p>
    </div>
</div>

我希望outer div 中的元素以某种方式设置样式，而inner div 中的元素以另一种方式设置样式。

但是，我不希望通过重置 outer 规则定义的每个属性来污染我的 inner 元素规则。

在下面的例子中，我想避免margin: 0px。请注意，当然，我的样式表要复杂得多，并且重置次数会更多且烦人。

outer a { margin: 5px; }
inner a { margin: 0px; color: orange; }

我最初的反应是使用直接子选择器>，但这对于链接、强、跨度等来说变得很麻烦。

下面的例子：

outer > a { color: orange; }

不会样式：

<div class="outer"><p><a>Link</a></p></div>
<div class="outer"><strong><a>Link</a></strong></div>
<div class="outer"><ul><li><a>Link</a></li></ul></div>
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div>
...

我需要找到其他方法

打破inner 的层次结构，而不明确定义重置。
将外部样式的范围限制在inner。

这可能吗？请注意，在当前情况下，无法重新排列我的 HTML 结构。

【问题讨论】：

既然你说重新排列你的HTML是不可能的，那么.inner是否保证是.outer的子级，而不是嵌套在其他任何地方？
@BoltClock：很遗憾，不，.inner 可能会出现在.outer 之外。抱歉，这些名称确实具有误导性。

标签： html css inheritance css-selectors hierarchy

【解决方案1】：

CSS3 选择器适合您吗？如果是的话，这个技巧可能会有所帮助：

CSS：

.outer>:not(div) a { color: orange; }

编辑：

.outer > a, .outer > :not(.inner) a { color: orange; }

jsBin演示

【讨论】：

那确实有没有造型的缺点，比如<div class="outer"><a>Link</a></div>，不是吗？
.outer>:not(.inner) 将适用于 .outer 的所有没有类 .inner 的直接子代。 Demo。在 Chrome 22、IE 9、FF 13 中测试。
@RoddyoftheFrozenPeas，很好，但是如果.outer div 包含多个元素怎么办？应该选择标题或段落吗？
@HashemQolami 他们是。选择器适用于不是.inner 的所有直接子代(>)。可以使用.outer>:not(.inner) *获取不在.inner中的直系子代的子代。

【解决方案2】：

您可以使用:not 选择器：

.outer > *:not(.inner) *

【讨论】：