Html 无法使CSS:not（）选择器按要求工作_Html_Css

Html 无法使CSS:not（）选择器按要求工作

html css

Html 无法使CSS:not（）选择器按要求工作,html,css,Html,Css,试图让CSS:not（）选择器以一种非常具体的方式为我工作，这让我有点为难。我花了大量时间四处寻找，找到了一些像这样的好资源，但最后我不得不承认失败。我希望这里有一个更开明的灵魂能帮上忙基本上，我想模糊一些文本，同时保持其他文本不变。有关HTML/CSS，请参见以下内容： <div class="top-hide"> <p class="reveal">Paragraph 1</p> <div class="reveal">Par

试图让CSS:not（）选择器以一种非常具体的方式为我工作，这让我有点为难。我花了大量时间四处寻找，找到了一些像这样的好资源，但最后我不得不承认失败。我希望这里有一个更开明的灵魂能帮上忙

基本上，我想模糊一些文本，同时保持其他文本不变。有关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段
第2款
第3款
第4段
第5段
第6段
第7段
第8段
.top隐藏：不显示（.leaver）{
颜色：透明；
文本阴影：0 10px黑色；
}

我想透露第1至第5段，而第6至第8段则应模糊不清。然而，第1、第2和第5段被披露，其他部分则模糊不清。你能告诉我为什么我的CSS不起作用，并构造正确的CSS来实现我的目标吗

我还构建了一个示例来演示我所面临的问题

非常感谢第4段

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

尽管段落具有

class=“reveal”

，但您编写的选择器与div元素匹配（然后段落继承透明的前景色和阴影）

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

最简单的解决方案是：

将所有

class=“reveal”

移动到子元素（即

第4段

和

使用子组合器，以便只隐藏未公开的子对象（而不是子对象）：

.top hide>：not（.reveal）

嵌套元素与选择器混乱…示例：

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

希望这有帮助。给你：

HTML

更新的

：不（）仅在现代浏览器上受支持，而在IE上不受支持。您想用JavaScript/jQuery解决跨浏览器问题吗？@SaumilSoni-MSIE支持

：not

已有四年多了。@Quentin我很抱歉，但pn206提供的链接明确指出，IET不支持它。这就是使用doc的问题所在2008年的演讲。@Quentin Damm我没有看日期，谢谢你指出它。谢谢@Quentin，不幸的是，有一些组合会揭示太多……谢谢，你关于它为什么不起作用的回答是有道理的，这就是我怀疑发生的事。然而，正如我对@Quentin的评论，我当前无法使用您的解决方案。

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

<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>

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

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