这如何以及为什么起作用？答案

【问题标题】：How and why does this work?这如何以及为什么起作用？
【发布时间】：2012-12-30 11:19:36
【问题描述】：

这个来自印度的 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;
      }

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

【问题讨论】：

与其重述别人已经做过的事情：css-tricks.com/on-target

标签： html css hide show show-hide

【解决方案1】：

在 CSS 中，:target 放置在 CSS 标记之后，例如，#lightbox 意味着当且仅当您的网页的 URL 附加了 @ 时，您的规则 #lightbox:target 的内部代码才会被评估987654325@，例如http://www.stackoverflow.com/#lightbox。在这种情况下，浏览器将评估以下代码：

#lightbox:target { display:block; }

【讨论】：

我能否解释一下这是如何工作的，请纠正我，因为有一个特定的地方我无法通过。首先显示“#lightbox a href 文本”，它指的是 div id #lightbox。然后将其重定向到该 div，然后使“a href 文本现在显示为“#””。这就是我卡住的地方。这怎么可能，为什么“a href”会变成“#”？
如果您在a 标记中设置href 属性，该标记前面带有# 字符（例如href='#lightbox'），您的浏览器会将其解释为HTML 锚点（请参阅@987654321 @)，允许您在页面中的元素之间导航而无需刷新它。这就是为什么您的浏览器不会刷新页面，而是将# 字符附加到 URL 后跟给定的 id。
好吧，我现在基本明白了。不幸的是，经过一番思考......这只是做我一直想做的事情的坏方法，因为我相信它的工作量比我希望的要多，而且我对我计划使用它的最初想法因为已经改变。无论如何感谢您的解释:=)

【解决方案2】：

截至the W3 Selectors Level 3 Recommendation：

例子：

p.note:目标

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

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

伪选择器可以识别这一点并应用正确的样式。

【讨论】：

【解决方案3】：

关键是:target 伪选择器。它有资格成为活动锚（在这种情况下为#lightbox）。

您可以在此处阅读更多信息：http://css-tricks.com/on-target/

【讨论】：