2

鉴于下面的 HTML，您将如何选择所有不是 .itemcontainer(s) 后代的 .name(s)。

类似 .group .header .name:not(descended from .itemcontainer)

我知道这可以很容易地用 jQuery 或通过添加其他类来完成，但是任何纯 css 解决方案？我一直无法找到“不是来自”选择器...

<div class='group'>

    <!-- Any number of ancestors of any type -->

    <div class='header'>

         <!-- Any number of ancestors of any type -->

        <div class='name'>

            SELECT ME!!!

        </div>

    </div>

    <div class='body'>

        <div class='itemcontainer'>

            <div class='item1'>

                <!-- Any number of ancestors of any type -->

                <div class='header'>

                        <!-- Any number of ancestors of any type -->

                    <div class='name'>

                            DON'T SELECT ME!!!

                    </div>

                </div>

                <div class='body'>

                    ...

                </div>

            </div>

                ...

        </div>

    </div>

        ...

</div>

谢谢！

4

2 回答 2

2

我不知道在 CSS 选择器中排除这种情况的方法；但是您可以为所有人定义一个规则，然后为特定的取消定义。

.group .header .name {
    background-color: green;
}
.group .itemcontainer .header .name {
    background-color: inherit;
}

编辑：鉴于您要实现的目标（取自对我的回答的评论），不将其作为纯 CSS 选择器，但确实使用 jQuery 更有意义：

$('.group .header .name').filter(':not(.itemcontainer *)')​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.click(onClick);
于 2012-12-17T04:23:49.917 回答
0

我认为你想要做的是：

.name:not(.itemcontainer .name)

但这不起作用，因为选择器:not()只接受简单的选择器。换句话说：对不起，我认为您无法使用:not()选择器完成此操作。

于 2012-12-17T04:47:35.827 回答