blocks|key|2786801|text|我不认为这是可能的与CSS单独的，除非一个不太理想的解决办法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2786802|Selectors+3+specification声明:not()需要一个简单的选择器，这就是为什么您的初始尝试不起作用的原因。|CODE|2786803|解决方法的第一个想法是简单的覆盖，但这有一个重要的警告：“排除的”父对象的所有子对象都必须用相同的display类型覆盖：|2786804|​|2786805|body+*+{+display:+none;+}+

.list-app,+.list-app+*+{+
++display:+block+!important;++/*+Every+child+is+now+display:+block+*/
}|code-block|syntax|javascript|2786806|Hello+world
<div+class="list-app">
++Hi+world
</div>|2786807|2786808|要更深入地了解为什么存在这种变通方法的警告，我们可以参考BoltClock的an+excellent+answer，以了解更早的相关问题：|2786809|2786810|浏览器的缺省样式是在其用户代理样式表中定义的，您可以在其中找到here的源代码。不幸的是，Cascading+and+Inheritance+level+3+spec似乎没有提出将样式属性重置为其浏览器默认值的方法。然而，有计划在Cascading+and+Inheritance+level+4中重新引入一个关键字-工作组还没有确定这个关键字的名称(链接目前显示为revert，但还不是最终的)。可以在caniuse.com上找到有关浏览器对revert的支持的信息。|blockquote|2786811|2786812|虽然第3级规范确实引入了initial+keyword，但将属性设置为其初始值会将其重置为由CSS定义的默认值，而不是由浏览器定义的。display的初始值是inline；这是指定的here。initial关键字是指该值，而不是浏览器默认值。|2786813|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/selectors-3/#negation|1|https://stackoverflow.com/a/8229026/2026606|2|https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements|3|https://www.w3.org/TR/css-cascade-3|4|https://www.w3.org/TR/css-cascade-4/#valdef-all-revert|5|https://caniuse.com/#search=revert|6|https://www.w3.org/TR/css-cascade-3/#initial|7|https://www.w3.org/TR/CSS21/visuren.html#display-prop^0|9|7|0|R|6|0|P|0|0|1D|7|0|0|0|0|0|12|J|1|0|0|53|6|66|6|V|4|2|19|12|3|37|X|4|5M|B|5|0|0|C|7|1V|7|27|6|2O|7|10|3|1J|1U|C|F|6|2J|4|7|0^^$0|@$1|2|3|4|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1S|8|@$9|1T|A|1U|B|H]]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|I|3|J|5|6|7|1Y|8|@$9|1Z|A|20|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|21|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|22|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|O|7|23|8|@]|D|@]|E|$P|Q]]|$1|T|3|L|5|6|7|24|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|25|8|@]|D|@$9|26|A|27|1|28]]|E|$]]|$1|W|3|-4|5|6|7|29|8|@]|D|@]|E|$]]|$1|X|3|Y|5|Z|7|2A|8|@$9|2B|A|2C|B|H]|$9|2D|A|2E|B|H]]|D|@$9|2F|A|2G|1|2H]|$9|2I|A|2J|1|2K]|$9|2L|A|2M|1|2N]|$9|2O|A|2P|1|2Q]]|E|$]]|$1|10|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|2S|8|@$9|2T|A|2U|B|H]|$9|2V|A|2W|B|H]|$9|2X|A|2Y|B|H]|$9|2Z|A|30|B|H]|$9|31|A|32|B|C]|$9|33|A|34|B|C]]|D|@$9|35|A|36|1|37]|$9|38|A|39|1|3A]]|E|$]]|$1|13|3|-4|5|6|7|3B|8|@]|D|@]|E|$]]]|14|$15|$5|16|17|18|E|$19|1A]]|1B|$5|16|17|18|E|$19|1C]]|1D|$5|16|17|18|E|$19|1E]]|1F|$5|16|17|18|E|$19|1G]]|1H|$5|16|17|18|E|$19|1I]]|1J|$5|16|17|18|E|$19|1K]]|1L|$5|16|17|18|E|$19|1M]]|1N|$5|16|17|18|E|$19|1O]]]]

I don't think this is possible with CSS alone, barring a less-than-ideal workaround.
The <a href="https://drafts.csswg.org/selectors-3/#negation" rel="nofollow noreferrer">Selectors 3 specification</a> states that <code>:not()</code> requires a simple selector, which is why your initial attempt doesn't work.
The first thought for a workaround would be a simple override, but this has a major caveat: all children of the &quot;excluded&quot; parent would have to be overriden with the same <code>display </code> type:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body * { display: none; } 

.list-app, .list-app * { 
 display: block !important; /* Every child is now display: block */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;Hello world&lt;/span&gt;
&lt;div class="list-app"&gt;
 &lt;span&gt;Hi world&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

For some more insight as to why this workaround's caveat exists, we can refer to <a href="https://stackoverflow.com/a/8229026/2026606">an excellent answer</a> by BoltClock, to an older related question:
<blockquote>
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find <a href="https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements">here</a>. Unfortunately, the <a href="https://www.w3.org/TR/css-cascade-3" rel="nofollow noreferrer">Cascading and Inheritance level 3 spec</a> does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in <a href="https://www.w3.org/TR/css-cascade-4/#valdef-all-revert" rel="nofollow noreferrer">Cascading and Inheritance level 4</a> — the working group simply hasn't settled on a name for this keyword yet (the link currently says <code>revert</code>, but it is not final). Information about browser support for <code>revert</code> can be found on <a href="https://caniuse.com/#search=revert" rel="nofollow noreferrer">caniuse.com</a>.
While the level 3 spec does introduce an <a href="https://www.w3.org/TR/css-cascade-3/#initial" rel="nofollow noreferrer"><code>initial</code> keyword</a>, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of <code>display</code> is <code>inline</code>; this is specified <a href="https://www.w3.org/TR/CSS21/visuren.html#display-prop" rel="nofollow noreferrer">here</a>. The <code>initial</code> keyword refers to that value, not the browser default.
</blockquote>

I'm trying to hide all content on a page besides a given element and all of it's children using CSS.

Right now, I'm looking into the :not selector, but I haven't been able to get it working with the * selector.

<pre><code>:not(.list-app) {
 display: none;
}

:not(.list-app *) {
 display: none;
}
</code></pre>

The above code is able to target the parent ".list-app" but I'm not able to target the children of the element.

Any thoughts?

How do I select all elements on the page expect for a given element and all it's descendants?

我试图使用CSS隐藏页面上除给定元素之外的所有内容以及它的所有子元素。现在，我正在研究:not选择器，但我还没能让它与*选择器一起工作。:not(.list-app) {    display: none;}:not(.list-app *) {    display: none;}上面的代码可以指向父元素".list...

问如何选择页面上除给定元素及其所有子元素之外的所有元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择页面上除给定元素及其所有子元素之外的所有元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择页面上除给定元素及其所有子元素之外的所有元素？
EN