限制CSS选择器范围

时间:2014-01-16 08:54:21

标签: html css css-selectors

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

我的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-part仅在最接近的.item.is-active时才会被列出。

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

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

这是一个带有实例的fiddle

谢谢。

2 个答案:

答案 0 :(得分:0)

怎么样(假设只有一个元素有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);这是我能想到的唯一解决方案......

答案 1 :(得分:0)

只需覆盖元素没有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 demo