css - 覆盖 CSS 可见性

Question

我有

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

我希望div隐藏，除非.active正在使用。我试过了，<div id="boxes" class="active">但div仍然隐藏。

无论如何，.active班级是否可以覆盖隐藏的可见性？

Answer 1

CSS 选择器具有“特异性”或权重（6.4.3 计算选择器的特异性），它定义了优先选择器。通过 ID 引用元素的选择器具有很高的权重，因此要覆盖它，您需要更具体的“活动”选择器：

#boxes.active { visibility: visible }

#boxes或者以某种方式不太具体的选择器。类选择器比元素选择器更重要，所以它会覆盖visibility（jsfiddle）：

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

Answer 2

如果您的<div>元素被用作具有多个 的同一页面链接#boxes，例如用于选项卡式页面，您也可以使用 :target。这将允许您单独设置每个样式:)

<div id="boxes">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS 会稍有变化...在 之后添加一个空格#boxes，因为class是 decendent <div>。

#boxes .box1:target{visibility: visible;}
#boxes .box1:not(:target){visibility: hidden;}
#boxes .box2:target{visibility: visible;}
#boxes .box1:not(:target){visibility: hidden;}

Answer 3

#boxes.active { visibility: visible !important; }

实际上 '!important' 在将 div 与类配对时不是必需的，但如果它不适合您，请考虑一下。

Answer 4

你可以用它!important来赋予价值的重要性。 !import简单的意思是，它比其他重要，所以只执行它。

#boxes.active { 
    visibility: visible !important; 
}

在这里了解更多