1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
---
title: ':target'
slug: 'Web/CSS/:target'
tags:
- CSS
- Layou
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>
<p><strong><code>:target</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> 代表一个唯一的页面元素(目标元素)，其{{htmlattrxref("id")}} 与当前URL片段匹配 .</p>
<pre class="brush: css no-line-numbers">/* 选择一个ID与当前URL片段匹配的元素*/
:target {
border: 2px solid black;
}</pre>
<p>例如, 以下URL拥有一个片段 (以#标识的) ，该片段指向一个ID为section2的页面元素:</p>
<pre>http://www.example.com/index.html#section2</pre>
<p>若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中：</p>
<pre class="brush: html"><section id="section2">Example</section></pre>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="一个内容列表">一个内容列表</h3>
<p><code>:target</code> 伪类可用于加亮显示页面中可从表格内容中链接到的部分。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}</pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample('一个内容列表', 500, 300)}}</p>
<h3 id="纯CSS高亮">纯CSS高亮</h3>
<p>你可以不使用任何Javascript代码，只使用<code>:target</code>伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其<code>display</code> 以便显示它们。</p>
<div class="note"><strong>注意:一个基于<code>:target</code>伪类的更为完善的纯-CSS加亮框可以在</strong><a href="https://github.com/madmurphy/takefive.css/">GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>)上找到。</div>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: 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;
}</pre>
<h4 id="结果_2">结果</h4>
<p>{{EmbedLiveSample('纯CSS高亮', 500, 220)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Defines HTML-specific semantics.</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>No changes.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("css.selectors.target")}}</p>
</div>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Using_the_:target_selector">Using the :target pseudo-class in selectors</a></li>
</ul>
|
