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 }

Answer 2

如果您的<div>元素被用作多个#boxes的同页链接，例如标签页，您还可以使用：target。这将允许您单独设置每个样式：）

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

CSS会略有变化......在#boxes之后添加空格，因为class位于后代<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; }

实际上，在将div与类配对时，'！important'不是必需的，但如果它不适合你，那就考虑一下..

Answer 4

您可以使用 !important 来表示价值的重要性。 !import 简单的意思就是，比别人重要所以只执行它。

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

了解详情here

覆盖CSS可见性

4 个答案: