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