限制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演示 。