覆蓋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 } 

Answer 2

如果您<div>元素被用來作爲同一頁的鏈接有多個#boxes，如標籤頁，你可以也用於：目標。這將使你的風格每個單獨的一個:)

<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; } 

其實「！重要的」配對帶班一個div時，是沒有必要的，但如果它不爲你工作，只考慮這個..