css - 覆盖 CSS 可见性

Question

我有

#boxes { visibility: hidden } 
.active { visibility: visible }

我想要 div被隐藏，除非 .active正在使用中。我试过 <div id="boxes" class="active">但是 div仍然是隐藏的。

有没有 .active覆盖隐藏可见性的类？？

Answer 1

CSS 选择器具有“特异性”或权重 ( 6.4.3 Calculating a selector's specificity )，它定义了选择器的优先级。通过 ID 引用元素的选择器具有高权重，因此要覆盖它，您需要更具体的“事件”选择器:

#boxes.active { visibility: visible }

或者以某种方式为 #boxes 选择器。类选择器比元素选择器更重要，所以它会覆盖 visibility ( jsfiddle ):

div  { visibility: hidden } 
.active { visibility: visible }