|
5. CSS 3 偽類
:target
當(dāng)你使用錨點(diǎn)(片段標(biāo)識(shí)符 fragment identifier)的時(shí)候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，這“#comments”就是一個(gè)片段標(biāo)識(shí)符，你就可以使用:target偽類來控制目標(biāo)的樣式。
舉個(gè)例子，比如你有一個(gè)很長(zhǎng)的使用了很多文字和h2標(biāo)題的頁面，然后在頁面的頭部有一個(gè)對(duì)這些標(biāo)題的索引。如果在點(diǎn)擊索引內(nèi)的某個(gè)鏈接時(shí)，相應(yīng)的標(biāo)題以某種方式高亮，然后滾動(dòng)到相應(yīng)的位置，對(duì)讀者就會(huì)很有用。很簡(jiǎn)單。
h2:target {
background: #F2EBD6;
}
瀏覽器兼容性
這一次，IE瀏覽器完全不支持:target偽類，另一個(gè)小問題就是Opera 在使用“前進(jìn)”和后退按鈕時(shí)不支持該選擇器。但是其它的各個(gè)主流瀏覽器都支持該選擇器。
UI元素狀態(tài)偽類
有些HTML元素有enable 或disabled 狀態(tài)(比如，文本輸入框)和 checked 或unchecked 狀態(tài)(單選按鈕和復(fù)選框)。這些狀態(tài)就可以使用:enabled、:disabled 或:checked 偽類來分別定位。
那么你就會(huì)想，如果任意一個(gè)禁用的(disabled)文本框應(yīng)該使用淺灰色的背景和虛線邊框：
input:disabled {
border:1px dotted #999;
background:#F2F2F2;
}
你也可能會(huì)想讓所有選中的復(fù)選框有個(gè)左邊距(這樣就可以在眾多的復(fù)選框中很容易認(rèn)出來)：
input[type=”checkbox”]:checked {
margin-left: 15px;
}
瀏覽器兼容性
所有的主流瀏覽器，除了我們常常不報(bào)希望的IE系列瀏覽器，都支持UI元素狀態(tài)偽類。如果你考慮只是添加附加級(jí)別的細(xì)節(jié)和增強(qiáng)網(wǎng)站的可用性，這個(gè)仍然是可以采用的。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 征服高級(jí)CSS選擇器 [4] 下一頁 征服高級(jí)CSS選擇器 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 5 頁 征服高級(jí)CSS選擇器 [5]
