限制CSS选择器范围

Question

这有点奇怪，也许是错误的，但这就是我想要做的...

我的HTML看起来像这样：

<div class="item is-active">
    <div class="item-part"></div>

    <div class="item small">
        <div class="item-part">

        </div>
    </div>
</div>

并使用CSS，我想这样做：

.item.is-active  .item-part {
    outline:1px solid red;
}

问题在于内部的.item-part也将被概述，这是不希望的。 我希望仅当最接近的.item是.item .is-active时才概述.item-part 。

我宁愿不使用JS也不使用direct-sibling选择器，因为html可能有所不同。 我也不想覆盖这样的规则：

.item:not(.is-active) .item-part {
        outline:none;
}

这是一个生动的例子

谢谢。

Answer 1

怎么样（假设只有一个元素具有is-active类）：

.item.is-active .item-part {
    outline:1px solid red; /* active item part style */
}
.item.is-active .item .item-part {/* e.g. child of iten that is not active*/
    outline: none; /* disable active item part style */
}

如果您不能修改类名，请不要使用javascript，并且直接后代解决方案将不起作用（例如，由于有时可能有wrapper-div的原因）； 这是我能想到的唯一解决方案...

Answer 2

当您的元素没有is-active类时，只需重写样式即可：

.item.is-active  .item-part {
    outline:1px solid red;
}

.item.is-active .item .item-part,
.item .item-part {
    outline:none;
}

.item.is-active .item-part具有比.item .item-part选择器更高的特异性，因此它将始终应用于.item-part后代。

JSFiddle演示 。