:target
The:target
pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..
URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:
http://example.com/folder/document.html#section2
The anchor can be any element with anid
attribute, e.g. <h1 id="section2">
in our example. The target element h1
can be represented by the :target
pseudo-class.
备注:
Theid
attribute was new in HTML 4 (December 1997). In old-style HTML <a>
is a target element. The:target
pseudo-class applies to those targets as well.
範例
: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%;
}
Working with display: none elements…
The :target
pseudo-class also works fine with undisplayed elements:
<!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>
<p>
Write your comment:<br />
<textarea></textarea>
</p>
</form>
</div>
</body>
</html>
規範
Specification |
---|
HTML Standard # selector-target |
Selectors Level 4 # the-target-pseudo |
瀏覽器兼容性
BCD tables only load in the browser