目標偽類選擇器是CSS中一種比較特殊的選擇器,它可以選中當前頁面正在被訪問的錨點元素。這意味著,如果我們的URL地址欄中的錨點跟頁面中的錨點元素匹配,那么這個錨點元素就會被選中。其語法如下:
:target { /* 聲明屬性 */ }
使用目標偽類選擇器可以實現很多有趣的效果,例如:
#red { background-color: red; color: white; } #blue { background-color: blue; color: white; } #green { background-color: green; color: white; } /* URL地址欄中的錨點為#red時,選中id為red的元素 */ #red:target { /* 聲明屬性 */ } /* URL地址欄中的錨點為#blue時,選中id為blue的元素 */ #blue:target { /* 聲明屬性 */ } /* URL地址欄中的錨點為#green時,選中id為green的元素 */ #green:target { /* 聲明屬性 */ }
上面的代碼就實現了一個比較簡單的效果,當URL地址欄的錨點為red、blue或green時,分別選中相應的顏色塊。這種效果可以用來實現單頁應用的導航,也可以用來強調當前頁面某些內容。