隐藏特定类的所有div，仅使用CSS的一个除外

Question

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除外，后者位于仅使用css的具有“ ref”类的另一个div中。

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. 谢谢。

Answer 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 编辑说明：如果您想应用“非”规则，我认为您将需要此结构

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

Answer 2

Try the below code: 试试下面的代码：

CSS 的CSS

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

Html 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类之后添加一个空格。

Answer 3

.msg { display:none; }

.ref .msg { display:block; }

This should be working. 这应该工作。

隐藏特定类的所有div，仅使用CSS的一个除外

问题描述

3 个解决方案

解决方案1
6 2015-09-14 09:27:40

解决方案2
2 2015-09-14 15:25:53

解决方案3
1 2015-09-14 09:29:26

隐藏特定类的所有div，仅使用CSS的一个除外

问题描述

3 个解决方案

解决方案1 6 2015-09-14 09:27:40

解决方案2 2 2015-09-14 15:25:53

解决方案3 1 2015-09-14 09:29:26

解决方案1
6 2015-09-14 09:27:40

解决方案2
2 2015-09-14 15:25:53

解决方案3
1 2015-09-14 09:29:26