仅使用CSS隐藏特定类别的所有div，除了其中一个

Question

仅使用CSS隐藏特定类别的所有div，除了其中一个

4

我有以下HTML代码，我想隐藏所有具有'class'为'msg'的div，但不包括一个具有相同类的div。

<html>

<div class="ref" >
    <div class="msg">  Message ref </div>
</div>

<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>

</html>

我希望能够仅使用 CSS 隐藏所有具有类名“msg”的 div，除了在另一个具有类名“ref”的 div 内部的 div。

我的解决方案是：

.msg:not(.ref.msg) {
     display: none;
}

但是它没有起作用。请给我一些必要的调整CSS样式的建议，以达到预期效果。

谢谢。

- Oomph Fortuity

2

在两个类之间添加一个空格，你的代码中指定了具有.ref和.msg类的div一起。因此，在.ref和.msg之间插入一个空格。 - Domain

我怀疑这是不可能的，因为没有父选择器，而在这里需要父选择器，因为“：not”只接受简单选择器。 - Paulie_D

@WisdmLabs 在类之间添加空格后仍然无法正常工作。 - Oomph Fortuity

@Paulie_D 建议采用另一种方法 - Oomph Fortuity

没有单一的选择器可以做到这一点...请参见下面的答案。 - Paulie_D

3个回答

2

尝试以下代码：

CSS

.ref :not(.msg) {
    display: none;
}

Html

<div class="ref" >
    <div class="msg">  Message ref 1 </div>
</div>
<div class="ref" >
    <div class="msg1">  Message ref 2 </div>
</div>
<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>

确保在.ref类之后添加一个空格。

- Shibin Joseph

1

.msg { display:none; }

.ref .msg { display:block; }

这应该可以工作。

- Mg Thar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frnnd Sgz · Accepted Answer

你可以尝试这个。

<style>
    .msg{
     display: none;
    }
    .ref .msg{
     display: block;
    }

</style>

编辑说明：如果想应用“非”规则，我认为您需要使用以下结构

<style>
    div:not(.ref){display: none;}
</style>
<div class="msg ref">  Message ref </div>
<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>`