CSS選擇器：target不起作用？

Question

我正在嘗試為我的網站創建僅在禁用JavaScript時顯示的警告。 該警告應該可以被“點擊”。 為此，我認為CSS選擇器:target可能是一個好主意。 我最終想出了可以在本文底部看到的代碼。

此代碼段的想法是用戶必須單擊鏈接才能使警告消失。 由於CSS提供了:target選擇器，並且我能夠通過鏈接定位<div>元素，所以我認為這可能會解決。 好吧，顯然不是。 我也在首頁上使用相同的代碼進行了嘗試，但是您可能會注意到，它也不起作用。

我非常感謝任何可能幫助我完成此工作的幫助。

 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); /********************/ /* noscript warning */ /********************/ div.noscript-warning { opacity: 1; background: #6ee5f9; color: #fff; padding: 0.2em; font-family: "Open Sans", sans-serif; text-align: right; animation-duration: 2s, 2s; animation-delay: 0s, 2s; animation-timing-function: none, ease-in-out; animation-name: hide, fade-in; } div.noscript-warning > a { text-decoration: none; color: #fff; } div.noscript-warning-text { padding: 0.2em; border: solid white 0.2em; text-align: center; } #hide-warning { display: none; } #hide-warning:target + div.noscript-warning { display: none; } @keyframes hide { from { opacity: 0; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; color: #6ee5f9; } to { opacity: 1; color: #fff; } } 

 <div class="noscript-warning"> <div id="hide-warning"></div> <div class="noscript-warning-text"> This page makes use of JavaScript to display certain aesthetic goodies. These are disabled because you have JavaScript disabled. Because of that, certain features will not work at all. You have been warned.<br/> Click &quot;Dismiss&quot; to dismiss this warning. </div> <a href="#hide-warning">Dismiss [x]</a> </div> 

Answer 1

你寫了

#hide-warning:target + div.noscript-warning { display: none; }

但#hide-warning的同級div具有類.noscript-warning-text因此選擇器應為

#hide-warning:target + div.noscript-warning-text { display: none; }

如果您需要選擇外部div，則只需將#hide-warning移一個級別，例如

<div id="hide-warning"></div>
<div class="noscript-warning">
    <div class="noscript-warning-text">
      ... 
</div>

或者，如果您希望避免使用無用的空div並清理一下標記，則可以編寫

<div id="hide-warning" class="noscript-warning">
    <div class="noscript-warning-text">
      ... 
</div>

所以您的選擇器就變成了

 #hide-warning:target { display: none; }