最近的后代的 CSS 选择器？

Question

我正在寻找一种使用纯 CSS 选择器来选择“最接近”后代的方法。

基本上，我有一个容器/containee div 的层次结构。当我在容器上放置一个特定的 CSS 标记时，我想在它的容器上应用一些规则。但由于它是分层的，我不想将规则应用于嵌套容器中的容器。

这可以很容易地使用 > 运算符，但我不控制容器和它的容器之间的标记，它可能有几个级别的其他标记。

要重现我的问题，这里有一个 jsfiddle:http://jsfiddle.net/stevebeauge/2xjh1jdf/

它包括这个标记:

<div class="container">
    <div class="some">
        <div class="containee">Border should not be dotted</div>
    </div>
</div>
<div class="container marker">
    <div class="containee">Border should be dotted</div>
</div>
<div class="container marker">
    <div class="containee">
        <p>Border should  be dotted</p>
        <div class="container">
            <div class="containee">
                <p>Border should not be dotted</p>
                <div class="container marker">
                    <div class="some">
                        <div class="containee">Border should be dotted</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

并使用这个 CSS:

div {
    margin:3px;
    border: solid 3px;
}
.container {
    border-color: red
}
.containee {
    border-color : green;
    border-style: solid;
}
.marker .containee {
    border-style: dotted;
    border-color:blue;
}

实际结果是:

而预期的结果是:

我知道我可以使用 javascript 解决方案(实际上它是我的替代方案)，但我更喜欢纯 CSS 解决方案以避免使用此类 JS 污染应用程序。

我也尝试过使用一些奇怪的选择器:

.marker .containee, 
.marker > div:not(.container) > .containee, 
.marker > div:not(.container) > div:not(.container) > .containee {
    border-style: dotted;
    border-color:blue;
}

但这不仅没有解决问题，而且我需要为每个预期的容器深度级别创建规则......

Answer 1

最后，我使用一些 javascript(在 jQuery 的帮助下)实现了我的要求。

作为@j08691 said ，即使有可能，解决方案也会很复杂，并且很难避免边缘情况陷阱。