CSS裏的:target僞選擇器

:target是CSS裏一個非常有趣的僞選擇器。它在CSS裏發生效力的過程是這樣的：當瀏覽器地址裏的hash(地址裏#號後面的部分)和:target僞選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。讓我們看一看這個:target僞選擇器是如何起作用的：

觀看演示

HTML代碼

下面的兩個HTML元素上我們都指定了ID：

<h2 id="section1">Section 1</h2>

<h2 id="section2">Section 2</h2>

注意上面元素的ID值，當:target指定的ID和window.location.hash值一致時，僞選擇器的樣式將會生效。

CSS代碼

:target僞選擇器可以配合CSS類、網頁標記和任何其它CSS選擇器使用：

/* would apply to all targetted elements */
:target {
	color: #000;
}

/* applies to H2's */
h2:target {
	color: #f00;
}

當window.location.hash是”section2″時，ID爲”section2″的元素將會變紅，並顯示下劃線。簡單吧！很像使用了CSS動畫技術，你甚至可以在這種效果上做出動畫。

觀看演示

:target非常有趣，但我們還沒有發現多少人使用這種技術。其實，如果不是太注重動態效果，使用這種瀏覽器原生技術來修飾你的應用是不錯的選擇。