这是如何以及为什么工作的？
这是如何以及为什么工作的？
提问于 2013-01-16 15:31:35
这个来自印度的家伙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;
}请给我全面地解释一下。谢谢您:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-16 15:36:33
在CSS中，放置在CSS标记之后的:target，例如，#lightbox意味着，当且仅当页面的#lightbox:target附加有#lightbox (例如，http://www.stackoverflow.com/#lightbox )时，规则#lightbox:target的内部代码才会被计算。在这种情况下，浏览器将评估以下代码：
#lightbox:target { display:block; }Stack Overflow用户
发布于 2013-01-16 15:36:13
截至the W3 Selectors Level 3 Recommendation
示例：
p.note:target
这个选择器表示note类的一个p元素，它是引用URI的目标元素。
因此，当您单击#lightbox时，lightbox-Element将成为URI的目标。
伪选择器可以识别这一点并应用适当的样式。
Stack Overflow用户
发布于 2013-01-16 15:36:06
关键是:target伪选择器。它有资格使用活动锚点(本例中为#lightbox)。
你可以在这里阅读更多信息：http://css-tricks.com/on-target/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14353327
复制相关文章
相似问题
腾讯云开发者
