Question

来自印度的Motyar来自网站：http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.html 显示了一个非常好的纯css方法来隐藏和显示div。但是我似乎无法理解它。这是代码，请向我解释一下，给新手。

HTML（不是我的代码）：

<div id="lightbox">

              <a href="#">Hide me</a><br />
              Hi!! <br />

              i am the lighbox

</div>

<a href="#lightbox" >Show the lighbox</a>

CSS（不是我的代码）：

#lightbox {
        display:none;
    }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }

请全面向我解释一下。谢谢:)）

Answer 1

在CSS中，:target位于CSS令牌之后，例如#lightbox，意味着当且仅当网址为{时才会对您的规则#lightbox:target的内部代码进行评估您的网页会附加#lightbox，例如http://www.stackoverflow.com/#lightbox。在这种情况下，浏览器将评估以下代码：

#lightbox:target { display:block; }

Answer 2

截至the W3 Selectors Level 3 Recommendation：

示例：

p.note：目标

此选择器表示类注释的p元素，它是引用URI的目标元素。

因此，当您点击#lightbox时，lightbox - 元素将成为您的URI的目标。

伪选择器可以识别这个并应用适当的样式。

Answer 3

密钥是:target伪选择器。它符合活动锚点（在这种情况下为#lightbox）。

您可以在此处详细了解：http://css-tricks.com/on-target/

这是如何以及为什么有效？

3 个答案: