html - 停止 CSS 层次结构

Question

我的层次结构如下:

<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; }

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

以下示例:

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>
...

我需要找到其他方法

• 打破内部的层次结构，而不显式定义重置。
• 将外部样式的范围限制为内部。

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

Answer 1

CSS3 选择器适合您吗？如果是，这个技巧可能有帮助:

CSS:

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

编辑:

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

<强> jsBin 演示