Question

我正在尝试隐藏页面上除给定元素之外的所有内容，以及所有使用CSS的子元素。

现在，我正在研究：not选择器，但是我无法使其与*选择器一起使用。

:not(.list-app) {
    display: none;
}

:not(.list-app *) {
    display: none;
}

上面的代码可以定位父级“ .list-app”，但不能定位元素的子级。

有什么想法吗？

Answer 1

我认为仅凭CSS不可能实现，除非有不理想的解决方法。

Selectors 3 specification指出:not()需要一个简单选择器，这就是您最初尝试不起作用的原因。

解决方法的第一个想法是简单的覆盖，但这有一个重要的警告：必须用相同的display类型覆盖“已排除”父对象的所有子对象：

body * { display: none; } 

.list-app, .list-app * { 
  display: block !important;  /* Every child is now display: block */
}

<span>Hello world</span>
<div class="list-app">
  <span>Hi world</span>
</div>

要进一步了解为何存在此替代方法的警告，我们可以参考BoltClock的an excellent answer，以参考一个较旧的相关问题：

浏览器的默认样式在其用户代理样式表中定义，您可以在其中找到here的来源。不幸的是，Cascading and Inheritance level 3 spec似乎没有提出一种将样式属性重置为其浏览器默认设置的方法。但是，已经计划在Cascading and Inheritance level 4中为此引入一个关键字-工作组尚未确定此关键字的名称（该链接当前显示revert，但这不是最终的）。可以在caniuse.com上找到有关浏览器对revert的支持的信息。

尽管3级规范确实引入了initial keyword，但将属性设置为其初始值会将其重置为其默认值（由CSS定义），< em>不是由浏览器定义的。 display的初始值为inline；指定为here。 initial关键字引用该值，而不是浏览器的默认值。

如何选择页面上期望给定元素及其后代的所有元素？

1 个答案: