:target

概述

伪类选择器 :target 代表一个特殊的元素，它的id是URI的片段标识符。 

带有片段标识符的URI链接到文档中某一个元素 ，被称为是目标元素。例如，这里有一个URI 指向一个叫section2锚点：
http://example.com/folder/document.html#section2
这个锚点可以是任意一个拥有id属性的元素， e.g. <h1 id="section2"> 在我们的例子中，目标元素h1通过伪类选择器:target可以这样被表述：

注意: id 属性在 HTML 4 (December 1997) 中才出现。在旧版的HTML <a name="foo"> 是一个目标元素。伪类选择器:target也能应用于这些目标。

例子

:target { outline: solid red }  /* draw a red, solid line around the target element */

/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */  

:target {
 -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
         box-shadow: 0.2em 0.2em 0.3em #888;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}

显示上的应用: 无元素…

伪类选择器 :target 也能很好的应用于未显示的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:target pseudoclass example</title>
<style>
#newcomment {
  display: none;
}

#newcomment:target {
  display: block;
}
</style>

</head>
<body>
 <p><a href="#newcomment">Add a comment</a></p>
 <div id="newcomment">
  <form name="myForm">
  <p>Write your comment:<br />
  <textarea name="myTextarea"></textarea></p>
  </form>
 </div>
</body>
</html>

创建一个纯CSS的 "lightbox"

伪类选择器 :target 在转换是否显示一些元素时是非常有用的。用这种方法你可以创建一个 纯CSS的 lightbox (live demo)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example &ndash; CSS Lightbox</title>
<style type="text/css">
div.lightbox {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div.lightbox:target {
  display: table;
}

div.lightbox figure {
  display: table-cell;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

div.lightbox figure figcaption {
  display: block;
  margin: auto;
  padding: 8px;
  background-color: #ddbbff;
  height: 250px;
  position: relative;
  overflow: auto;
  border: 1px #000000 solid;
  border-radius: 10px;
  text-align: justify;
  font-size: 14px;
}

div.lightbox figure .closemsg {
  display: block;
  margin: auto;
  height: 0;
  overflow: visible;
  text-align: right;
  z-index: 2;
  cursor: default;
}

div.lightbox figure .closemsg, div.lightbox figure figcaption {
  width: 300px;
}

.closemsg::after {
  content: "\00D7";
  display: inline-block;
  position: relative;
  right: -20px;
  top: -10px;
  z-index: 3;
  color: #ffffff;
  border: 1px #ffffff solid;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  margin: 0;
  background-color: #000000;
  font-weight: bold;
  cursor: pointer;
}

.closemsg::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.85;
}
</style>
</head>

<body>

<h1>Pure CSS Lightbox</h1>

<p>Some sample text&hellip;</p>

<p>[ <a href="#example1">Open example #1</a> | <a href="#example2">Open example #2</a> ]</p>

<p>Another sample text&hellip;</p>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="closemsg"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="closemsg"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
  </figure>
</div>

</body>
</html>

规范

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 Unknown (1.3) 9 9.5 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.3) 9.0 9.5 2.0

参见

文档标签和贡献者

 此页面的贡献者： gqqnbig, Le-Fu, FredWe
 最后编辑者: gqqnbig,