Question

我想使所有div标签不可见，除了我在html中标记为活动的标签。以下是我页面的摘录：

 <div id="container">
   <div id="1">
     invisible
     <div>invisible</div>
     <div>invisible</div>
   </div>
   <div id="2" class="active">
     visible
     <div>visible</div>
     <div>visible</div>
 </div>

..或通过javascript dom：

document.getElementById（“ 2”）。classList.add（'active'）;

预期的行为是，仅更改类将使所有“活动”类始终可见，而所有未标记的类则始终不可见。

我的第一次尝试，是在添加父容器并选择它之前，

 <style type="text/css">
   div { display:none; }
   div.active { display:block; }
 </style>

不起作用。它使所有div都不可见。

第二次尝试，准确选择了我真正想要选择的内容，效果很好：

 <style type="text/css">
   div#container>div.active { display:none; }
   div#container>div { display:block; }
 </style>

这是覆盖默认样式的正确方法吗？

Answer 1

您可以使用:not(selector)选择器。参考：w3schools。

只需添加到每个div yourChoice + active类中，当您希望它们消失时，删除yourChoice类。然后，:not(.active) { display: none }都消失了。

这是一个Codepen https://codepen.io/sebaLinares/pen/EddNbQ

希望它有用

如何将样式通常应用于所有标签，并在特定标签中覆盖样式

1 个答案: