使用 :target 样式化锚点

当使用页面锚点（页面中可以跳转到的部分，例如标题）时，你可以（理论上）使用 target 伪类来样式化锚点元素本身。

使用以下 HTML


<p>You can read all of content, or get straight to the <a href="#nittygritty">nitty-gritty</a>.</p>
<p>Alternatively, you can read the  <a href="#grittynitty">gritty-nitty</a>.</p>
<p>Or if you prefer, try the <a href="#wittyditty">witty ditty</a>.</p>
<!--[A whole load of content]-->
<h2 id="nittygritty">Nitty-Gritty</h2>
<h2 id="grittynitty">Gritty-Nitty</h2>
<h2 id="wittyditty">Witty-Ditty</h2>

以及以下 CSS


h2 {
	color: #f60;
}

h2:target {
	color: white;
	background: #f60;
}

浏览器不仅会跳转到目标元素（锚点），还会通过将其颜色更改为白色、背景更改为橙色来突出显示该元素。

但这里有个“理论上”。Internet Explorer 不支持 target 伪类（在撰写本文时 Opera 也不支持），因此它只在少数浏览器上有效。然而，target 仍然可以使用，因为它能使使用支持的浏览器用户受益，而不会对不支持的用户造成负面影响。例如，上面代码中的页面锚点在所有浏览器中仍然可以使用，只是 IE 用户将无法获得其他人所拥有的突出显示效果。

与 focus 伪类一样，你也可以通过一些 Suckerfish JavaScript 来模仿 target 伪类。