html - 如何隐藏页面中的所有元素，除了最上面的祖先元素？

Question

我正在编写一个测试插件（Firefox）只是为了学习。在某些时候，它会隐藏除一个之外的所有元素。我想做一些更复杂的事情。我的意图是隐藏所有东西，但<div id ="good">必须隐藏它的所有祖先容器。

这是我正在处理的示例 HTML：

<section id="wrap">
    <div>...</div>
    <div>...</div>
    <div id="good">...</div>
    <a>...</a>
</section>

所以我试图添加这个CSS：

body > :not(#good) {
    display: none;
}

当然这不起作用，它隐藏了页面上的所有内容，我想我需要wrap避免被隐藏，但即使更改代码，它也会一直隐藏所有内容：

body > :not([name="wrap"])

score 0 · Accepted Answer

您不需要为此使用子选择器（>），而是应该如下所示：

section :not(#good) {
    display: none;
}

或针对某一特定部分

#wrap :not(#good) {
    display: none;
}

1 回答 1