:target CSS 伪类 代表一个唯一的页面元素(目标元素),其ID与当前URL片段匹配 .

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

例如, 以下URL拥有一个片段 (以#标识的) ,该片段指向一个ID为section2的页面元素:

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

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

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

语法

:target

示例

一个内容列表

:target 伪类可用于加亮显示页面中可从表格内容中链接到的部分。

HTML

<h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

CSS

p:target {
  background-color: gold;
}

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

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

结果

纯-CSS加亮框

你可以不使用任何Javascript代码,只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的,链接到指定元素的锚。

注意:一个基于:target伪类的更为完善的纯-CSS加亮框可以在GitHub (demo)上找到.

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #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

/* 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,.7);
  content: "";
  cursor: default;
}

结果

 

Open in CodePenOpen in JSFiddle

 

规范

规范 状态 备注
HTML Living Standard
:target
Living Standard Defines HTML-specific semantics.
Selectors Level 4
:target
Working Draft No changes.
Selectors Level 3
:target
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 1.3WebView Android Full support 2Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5Safari iOS Full support 2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

参见

文档标签和贡献者

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