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

I have below HTML and I want to hide all divs having class 'msg' excluding one div having same class.

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

Here I want to hide all div having class 'msg' except div which is inside another div having class 'ref' using css only.

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

My style for that is

我的风格是

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

But it is not working.Please suggest me some required tweaks to my CSS style to achieve result.

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

Thanks.

3 个解决方案

#1

You can try this

你可以试试这个

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

</style>

Edit Note: If you want to apply the 'not'rule I think you would need this structure

编辑注意:如果你想应用'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>`

#2

Try the below code:

请尝试以下代码:

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>

make sure you add a space after .ref class.

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

#3

.msg { display:none; }

.ref .msg { display:block; }

This should be working.

这应该是有效的。

#1