:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.

:target CSS å½é¡é¸ææä»¶ä¸çç®æ¨åç´ ãç¶æä»¶è¼å¥æï¼ç®æ¨åç´ æ¯æ ¹ææä»¶ç URL çæ®µæ¨èç¬¦ç¢ºå®çã

css

/* é¸ææä»¶çç®æ¨åç´  */
:target {
  border: 2px solid black;
}

url

http://www.example.com/help/#setup

html

<section id="setup">å®è£èªªæ</section>

èªæ³

css

:target {
  /* ... */
}

æè¿°

ç®æ¨åç´ å¨æä»¶è¼å¥ä»¥åå¼å« history.back()ãhistory.forward() å history.go() æ¹æ³æè¢«è¨å®ãä½ history.pushState() è history.replaceState() æ¹æ³è¢«å¼å«æåä¸ææ¹è®ã

ç¯ä¾

ç®é

HTML

html

<h3>ç®é</h3>
<ol>
  <li><a href="#p1">è·³å°ç¬¬ä¸æ®µï¼</a></li>
  <li><a href="#p2">è·³å°ç¬¬äºæ®µï¼</a></li>
  <li>
    <a href="#nowhere">æ¤é£çµç¡æï¼å çºç®æ¨ä¸åå¨ã </a>
  </li>
</ol>

<h3>æçæè¶£æç« </h3>
<p id="p1">
  ä½ å¯ä»¥ä½¿ç¨ URL çæ®µä¾å®ä½<i>éæ®µæå</i>ãé»æä¸é¢çç¬¬ä¸åé£çµè©¦è©¦çï¼
</p>
<p id="p2">
  éæ¯<i>å¦ä¸æ®µæå</i>ï¼ä¹å¯ä»¥å¾ä¸é¢çç¬¬äºåé£çµè¨ªåãæ¯ä¸æ¯å¾æè¶£ï¼
</p>

CSS

css

p:target {
  background-color: gold;
}

/* å¨ç®æ¨åç´ å§æ·»å å½åç´  */
p:target::before {
  font: 70% sans-serif;
  content: "âº";
  color: limegreen;
  margin-right: 0.25em;
}

/* æ¨£å¼ç®æ¨åç´ å§çæé«æå */
p:target i {
  color: red;
}