css - 元素的选择器不是另一个元素的后裔

Question

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

类似于 .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);