隐藏除特定类之外的所有特定类的div

Question

隐藏除特定类之外的所有特定类的div

我有HTML以下,我想隐藏所有具有类'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>

Run Code Online (Sandbox Code Playgroud)

在这里,我想要隐藏所有具有类'msg'的div,除了div,它只是在另一个div中使用css类'ref'.

我的风格是

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

Run Code Online (Sandbox Code Playgroud)

但它没有用.请建议我对我的CSS样式进行一些必要的调整以获得结果.

谢谢.

Answer 1

Frn*_*Sgz 6

你可以试试这个

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

</style>

Run Code Online (Sandbox Code Playgroud)

编辑注意:如果你想应用'not'rule我认为你需要这个结构

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	3399 次
最近记录：	10 年，2 月前