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。

最简单的解决方案是：

将所有class="reveal"移至子元素（即<div class="reveal"><p>Paragraph 4</p></div> 和
使用儿童组合器，因此您只能隐藏未发布的儿童（而不是后代）：.top-hide > :not(.reveal)

Answer 2

嵌套元素搞乱选择器......示例：

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

div会显示，但p会使其无效。快速解决方法是始终在第一级（直接子级）中设置类，然后使用直接子选择器：

Updated JsFiddle

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

Answer 3

希望这会有所帮助。你走了：

HTML

<body>
    <div class="top-hide">
        <p class="reveal">Paragraph 1</p>
        <div class="reveal">Paragraph 2</div>
        <div class="reveal"><p>Paragraph 3</p></div>
        <!-- It doesn't work for the paragraph 3 is because, at first the 
        browser checks if `.top-hide :not(.reveal)` case is met when looking at 
        `div.top-hide > div.reveal`, It does not. Then again, it checks for 
        `.top-hide :not(.reveal)` when it looks at `div.top-hide p`, but this time
        the `.top-hide :not(.reveal)` is met. -->

        <div><p class="reveal">Paragraph 4</p></div>
        <!-- In this case, the case is met for `div.top-hide 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>
</body>

CSS

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

.top-hide .reveal, .top-hide .reveal *{
    color: black;
    text-shadow: none;
}

更新了JSFIDDLE

无法获得CSS：not（）选择器按需工作

3 个答案: