如何选择页面上除给定元素及其所有子元素之外的所有元素？
我试图使用CSS隐藏页面上除给定元素之外的所有内容以及它的所有子元素。
现在，我正在研究:not选择器，但我还没能让它与*选择器一起工作。
:not(.list-app) {
display: none;
}
:not(.list-app *) {
display: none;
}上面的代码可以指向父元素".list-app“，但我不能指向元素的子元素。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2019-06-05 03:17:20
我不认为这是可能的与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定义的默认值，而不是由浏览器定义的。display的初始值是inline；这是指定的here。initial关键字是指该值，而不是浏览器默认值。
https://stackoverflow.com/questions/56449755
复制相似问题