4

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

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

4

3 回答 3

2

例如，在 CSS 中，:target放置在 CSS 标记之后#lightbox意味着#lightbox:target当且仅当您的页面的 URL 附加了#lightbox诸如http://www.stackoverflow.com/#lightbox. 在这种情况下，浏览器将评估以下代码：

#lightbox:target { display:block; }
于 2013-01-16T07:36:32.983 回答
1

从 W3 选择器 3 级建议开始：

例子：

p.note：目标

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

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

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

于 2013-01-16T07:36:13.340 回答
0

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

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

于 2013-01-16T07:36:06.190 回答