CSS参考手册
选择 | Selectors
:target
该:target
CSS伪类代表一个其id
能与URL的段落(fragment)相匹配的唯一元素(目标元素)。
/* Selects an element with an ID matching the current URL's fragment */
:target {
border: 2px solid black;
}
例如,下面的URL有一个片段(用#符号表示)指向一个名为section2的
段落:
http://www.example.com/index.html#section2
当前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;
}
/* Add a pseudo-element inside the target element */
p:target::before {
font: 70% sans-serif;
content: "►";
color: limegreen;
margin-right: .25em;
}
/* Style italic elements within the target element */
p:target i {
color: red;
}
结果
纯css灯箱
您可以使用:target
伪类来创建一个灯箱,而不使用任何JavaScript。这种技术的核心在于于利用锚点链接指向页面中隐藏元素。一旦这些隐藏元素被定为跳转目标,在CSS中的:targe
选择器中的代码会改变它们display
属性以显示它们。
注意:GitHub(demo)提供了一个更完整的基于:target
伪类的纯CSS的灯箱。
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;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
HTML Living StandardThe definition of ':target' in that specification. |
Living Standard |
Defines HTML-specific semantics. |
Selectors Level 4The definition of ':target' in that specification. |
Working Draft |
No changes. |
Selectors Level 3The definition of ':target' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
9 |
9.5 |
1.3 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
2.1 |
(Yes) |
1.0 (1.7 or earlier) |
9.0 |
9.5 |
2.0 |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。