Question

我正在尝试为我的网站创建一个仅在禁用JavaScript时显示的警告。这个警告应该能够被点击掉＃34;为实现这一点，我认为CSS选择器:target可能是一个好主意。我最终提出了可以在本文底部看到的代码。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS选择器：目标不工作？

1 个答案: