html - 如何将样式普遍应用于所有标签，并为特定标签覆盖它

Question

除了我在 html 中标记为事件的那个之外，我想让所有的 div 标签都不可见。以下是我页面的摘录:

 <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 } 它们都消失了。

这是一个代码笔 https://codepen.io/sebaLinares/pen/EddNbQ

希望有用