:target

:target CSS 伪类表示一个唯一的元素(目标元素),其 id 与当前 URL 片段匹配。

css
/* 选择一个 ID 与当前 URL 片段匹配的元素*/
:target {
  border: 2px solid black;
}

例如,以下 URL 具有一个片段(由 # 符号表示),指向名为 section2 的元素:

url
http://www.example.com/index.html#section2

若当前 URL 等于上面的 URL 时,以下元素将被 :target 选择器被选中:

html
<section id="section2">Example</section>

语法

css
:target {
  /* ... */
}

示例

一个目录

:target 伪类可用于高亮显示页面中可从目录中链接到的部分。

HTML

html
<h3>目录</h3>
<ol>
  <li><a href="#p1">跳转到第一个段落!</a></li>
  <li><a href="#p2">跳转到第二个段落!</a></li>
  <li><a href="#nowhere">此链接不会跳转,因为目标不存在。</a></li>
</ol>

<h3>我的趣味文章</h3>
<p id="p1">你可以使用 URL 片段定位此<i>段落</i>。点击上面的链接试试吧!</p>
<p id="p2">这是<i>另一个段落</i>,也可以从上面的链接访问。这不是很愉快吗?</p>

CSS

css
p:target {
  background-color: gold;
}

/* 在目标元素中增加一个伪元素*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/*在目标元素中使用 italic 样式*/
p:target i {
  color: red;
}

结果

纯 CSS 高亮

你可以不使用任何 Javascript 代码,只使用 :target 伪类创建一个高亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位,CSS 就会更改其 display 以便显示它们。

备注: 一个基于 :target 伪类的更为完善的纯 CSS 高亮框可以在 GitHubdemo)上找到。

HTML

html
<ul>
  <li><a href="#example1">打开示例 #1</a></li>
  <li><a href="#example2">打开示例 #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></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.
    </figcaption>
  </figure>
</div>

CSS

css
/* Unopened lightbox */
.lightbox {
  display: none;
}

/* Opened lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}

结果

规范

Specification
HTML Standard
# selector-target
Selectors Level 4
# the-target-pseudo

浏览器兼容性

BCD tables only load in the browser

参见