我试图使用CSS隐藏页面上除给定元素之外的所有内容以及它的所有子元素。
现在,我正在研究:not选择器,但我还没能让它与*选择器一起工作。
:not(.list-app) {
display: none;
}
:not(.list-app *) {
display: none;
}
上面的代码可以指向父元素".list-app“,但我不能指向元素的子元素。
有什么想法吗?
发布于 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
复制相似问题