|
4. 偽類
動態(tài)偽類
之所以被稱為動態(tài)偽類是因為它們并不存在于HTML中——而是只有當用戶和網(wǎng)站交互的時候才會呈現(xiàn)。
有兩類動態(tài)偽類：鏈接 和用戶行為。鏈接就是:link 和:visited，而用戶行為包括:hover、:active 和:focus。
在本文中提到的css選擇器中，這幾個應(yīng)該是最常用到的。
:link偽類用于鏈接尚未被用戶訪問的時候，而:visited 偽類用于用戶訪問過的鏈接，也就是說它們是相反的。
:hover偽類用于用戶移動他們的鼠標在元素上，而尚未觸發(fā)或點擊它的時候。:active偽類應(yīng)用于用戶點擊元素的情況。最后，:focus偽類用于元素成為焦點的時候——最常用于表單元素。
你可以在你的樣式表中使用多種用戶行為動態(tài)偽類，這樣你就可以，比如，根據(jù)用戶的鼠標只是滑過或懸停的時候，為一個輸入框定義不同的背景色:
input:focus {
background: #D2D2D2;
border: 1px solid #5E5E5E;
}
input:focus:hover {
background: #C7C7C7;
}
瀏覽器兼容性
動態(tài)偽類被所有的現(xiàn)代瀏覽器支持，甚至IE6，但是請注意，對于IE系列瀏覽器來說，IE6只允許:hover 偽類應(yīng)用于鏈接元素(a標簽)而且只有IE8接受:active狀態(tài)。
:first-child
:first-child偽類允許你定位某個元素第一個子元素。比如，如果你想給你的無須列表的第一個li添加一個margin-top，你就可以這樣寫：
ul > li:first-child {
margin-top: 10px;
}
讓我們來看一看另一個例子:比如你想讓你的博客的側(cè)欄的H2標簽都有個頂部邊距，以將標題和它們前面的內(nèi)容區(qū)分開來，但是第一個h2不需要，你就可以使用下面的代碼：
#sidebar > h2 {
margin-top: 10px;
}
#sidebar > h2:first-child {
margin-top: 0;
}
瀏覽器兼容性
IE6 不支持 :first-child 偽類。根據(jù)偽類應(yīng)用到的設(shè)計的不同，它或許不會成為關(guān)注的主要問題。比如，如果你使用:first-child 選擇器來移除標題或段落上的頭部或底部的間距，你的布局在IE6中不會壞掉，它只會看起來有些不同。但是如果你使用:first-child選擇器從一個，比如浮動元素，移除左邊距或右邊距，將會讓你的設(shè)計亂掉。
語言偽類
語言偽類:lang()，允許你匹配一個基于它的語言的元素。
你如，你想讓你的網(wǎng)站的某個特定的鏈接根據(jù)頁面的語言有不同的背景顏色：
:lang(en) > a#flag {
background-image: url(english.gif);
}
:lang(fr) > a#flag {
background-image: url(french.gif);
}
這個選擇器將會匹配相關(guān)的鏈接——如果頁面的語言等于“en”或“fr”，或者以“en”或“fr”開頭并在后面帶個連字符“-”的話。
瀏覽器兼容性
不幸的是，只有IE瀏覽器中只有IE8支持該選擇器，其它的主要瀏覽器都支持該偽類選擇器。
出處：前端觀察
責任編輯：bluehearts
上一頁 征服高級CSS選擇器 [3] 下一頁 征服高級CSS選擇器 [5]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 征服高級CSS選擇器 [4]
