CSS中的target屬性是一個(gè)很實(shí)用的屬性,它可以為頁(yè)面中的錨點(diǎn)設(shè)置樣式。當(dāng)我們使用錨點(diǎn)時(shí),一般會(huì)在鏈接中添加#號(hào)和錨點(diǎn)的名稱(chēng),比如跳到第一部分。然后我們?cè)僭谥付ǖ牡胤郊由舷鄳?yīng)的錨點(diǎn),如
第一部分
。這樣點(diǎn)擊鏈接時(shí)頁(yè)面就能自動(dòng)跳到錨點(diǎn)的位置。在加入target屬性之后,我們可以為被錨點(diǎn)的元素添加樣式。如下面的代碼:
#section1:target { background-color: yellow; }
這段代碼的意思是,當(dāng)鏈接指向section1的錨點(diǎn)時(shí),section1這個(gè)元素就會(huì)被選中,然后給它添加一個(gè)黃色背景色。
可以看出,target屬性有以下幾個(gè)特點(diǎn):
- 應(yīng)用于被錨點(diǎn)的元素
- 選中的條件是鏈接指向該錨點(diǎn)
- 可以與CSS的大多數(shù)屬性一起使用,例如color,font-size等等
使用target屬性可以給頁(yè)面添加一些聲音視覺(jué)效果。例如,當(dāng)進(jìn)入頁(yè)面時(shí),頁(yè)面滾動(dòng)到某個(gè)位置,然后被錨點(diǎn)元素的樣式切換,或者通過(guò)點(diǎn)擊鏈接,文本增加或減少。
總的來(lái)說(shuō),target屬性是一個(gè)非常方便、美觀的屬性,同時(shí)還可以增強(qiáng)用戶(hù)體驗(yàn)。不過(guò)要注意,對(duì)于IE和低版本的Safari瀏覽器來(lái)說(shuō),target屬性不是很可靠,需要考慮兼容性問(wèn)題。
下一篇css offset