:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The:targetpseudo-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 anidattribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

备注： Theidattribute was new in HTML 4 (December 1997). In old-style HTML <a> is a target element. The:targetpseudo-class applies to those targets as well.

範例

css

:target {
  outline: solid red;
} /* draw a red, solid line around the target element */

css

/* 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:

html

<!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

參見

使用 :target