最接近后代的CSS选择器？

Question

我正在寻找一种方法来选择，使用纯CSS选择器，＆＃34;最接近＆＃34;后代。

基本上，我有一个容器/容器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，即使有可能，解决方案也会很复杂，并且难以避免边缘案例陷阱。

Answer 2

您可以尝试以下代码：

Fiddle here

.marker .container > .containee:first-child{border-style:solid !important;}