html - 无法获取 CSS :not() selector working as required

Question

我有点难以尝试让 CSS :not() 选择器以一种非常具体的方式为我工作。我花了很多时间环顾四周，找到了一些像这样的好资源 page但最后我不得不认输。我希望这里有一个更开明的灵魂能够提供帮助。

基本上，我想模糊一些文本，同时让其他文本保持不变。请参阅下面的 HTML/CSS:

<div class="top-hide">
    <p class="reveal">Paragraph 1</p>
    <div class="reveal">Paragraph 2</div>
    <div class="reveal"><p>Paragraph 3</p></div>
    <div><p class="reveal">Paragraph 4</p></div>
    <div class="reveal"><p class="reveal">Paragraph 5</p></div>
    <p>Paragraph 6</p>
    <div>Paragraph 7</div>
    <div><p>Paragraph 8</p></div>
</div>

.top-hide :not(.reveal) {
    color: transparent;
    text-shadow: 0 0 10px black;
}

我想公开第 1 到第 5 段，而第 6 到 8 段应该模糊掉。但是，第 1、2 和 5 段显示出来，其他段落被模糊掉了。您能告诉我为什么我的 CSS 不起作用并构建正确的 CSS 来实现我的目标吗？

我还构建了一个 JSFiddle展示我面临的问题。

非常感谢

Answer 1

<div><p class="reveal">Paragraph 4</p></div>

尽管该段落有 class="reveal" ，你写的选择器匹配div元素(然后段落继承透明前景色和阴影)。

CSS 中没有父级选择器，因此您不能排除包含 class="reveal"元素的 div。

最简单的解决方案是:

1. 移动所有 class="reveal" s 到子元素(即 <div class="reveal"><p>Paragraph 4</p></div> 和
2. 使用子组合器，这样你就可以只隐藏未公开的子(而不是后代):.top-hide > :not(.reveal)