CSS 选择器：目标不起作用？

Question

我正在尝试为我的网站创建一个警告，该警告仅在禁用 JavaScript 时显示。这个警告应该可以"clicked away"。为此，我认为 CSS 选择器 :target 可能是个好主意。我最终想出了可以在 post.

底部看到的代码

此代码段的想法是用户必须单击 link 才能让警告消失。由于 CSS 提供了 :target 选择器并且我能够通过 link 定位 <div> 元素，我认为这可能会成功。嗯，显然不是。我也在 homepage 上使用相同的代码进行了尝试，但您可能会注意到，它在那里也不起作用。

非常感谢任何可能帮助我完成这件事的帮助。

@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 有 class .noscript-warning-text 所以 select 或者应该是

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

如果您需要 select 外部 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>

所以你的 select 或者简单地变成

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

CSS 选择器：目标不起作用？

CSS selector :target not working?

html

css

noscript