CSS 3在以下情況下隱藏元素：target設置爲其他內容 - 顯示爲空時？

Question

只是想看看是否有一個純粹的CSS3解決方案，這個想法我想出了。

基本上，如果用戶導航到http://example.com，我想在我的頁面上顯示一個元素，說<section id="main" />。如果訪問http://example.com/#pics，但是，我想展示一個照片庫。

我知道這可以用JQuery來完成，但我儘可能地用CSS3來做，這只是一個實驗性網站，所以瀏覽器支持不是優先考慮的事情，但我對回退。

Answer 1

有一個看看：目標選擇和：沒有選擇器

你可以做沿

div:not(:target){ 
    display:none 
} 

#main:target { 
    display:block; 
} 

#pics:target { 
    display:block; 
} 

參考線的東西：
http://www.w3.org/TR/selectors/部分6.6.7是：不選擇（從他們的文件沒有目標）

和

http://www.w3.org/TR/selectors/#target-pseudo

Answer 2

此答案假定您選擇的類爲「hideme」。根據需要調整您的案例。

任何類型的「如果不是」可以用:not()僞代碼類來完成。在這種情況下：

.hideme:not(:target) {display: none;} 

然而，對於這個瀏覽器的支持是非常低的，所以不是你應該做這樣的事情：

selector {do something} 
selector:target {cancel the something} 

現在，這是一個有點棘手與display因爲不同的元素有不同的默認值，但它visibility是一個選擇：

.hideme {visibility: hidden;} 
.hideme:target {visibility: visible;} 

或者，或另外，您可能能夠使用position:absolute和position:static刪除文檔流中的選定項目。