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中的元素在另一个中设置样式。

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

在以下示例中，我想避免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结构。

Answer 1

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

<强> CSS：

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

修改

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

jsBin 演示

Answer 2

您可以使用:not选择器：

.outer > *:not(.inner) *

停止CSS层次结构

2 个答案: