Question

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

类似于.group .header .name：not（来自.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>

谢谢！

Answer 1

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

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

编辑：考虑到你想要实现的目标（从评论中得到我的答案），不要将它作为一个纯粹的CSS选择器更有意义，但确实如此jQuery的：

$('.group .header .name').filter(':not(.itemcontainer *)').click(onClick);

Answer 2

我认为你要做的是：

.name:not(.itemcontainer .name)

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

项目的选择器NOT来自另一个项目

2 个答案: