|
14. X[data-*="foo"]
在上一個選擇器中提到如何匹配所有圖片鏈接。如果使用X[href$=".jpg"]實現(xiàn)，需要這樣做：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
看上去比較麻煩。另一個解決辦法是為所有的圖片鏈接加一個特定的屬性，例如‘data-file’
html代碼
<a href="path/to/image.jpg" data-filetype="image"> 圖片鏈接 </a>
css代碼如下：
a[data-filetype="image"] {
color: red;
}
這樣所有鏈接到圖片的鏈接字體顏色為紅色。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
屬性選擇器。屬性選擇器中的波浪線符號可以讓我們匹配屬性值中用空格分隔的多個值中的一個�？聪旅胬樱�
html代碼
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代碼
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中，匹配data-info屬性中包含“external”鏈接的字體顏色為紅色。匹配data-info屬性中包含“image”的鏈接設(shè)置黑色邊框。
兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked偽類用來匹配處于選定狀態(tài)的界面元素，如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代碼中匹配的是所有處于選定狀態(tài)的單選radio，設(shè)置1px的黑色邊框。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
這兩個偽類與content結(jié)合用于在元素的前面或者后面追加內(nèi)容，看一個簡單的例子：
h1:after {content:url(/i/logo.gif)}
上面的代碼實現(xiàn)了在h1標(biāo)題的后面顯示一張圖片。
我們也經(jīng)常用它來實現(xiàn)清除浮動，寫法如下：
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
出處：css9.net
責(zé)任編輯：bluehearts
上一頁 30個最常用css選擇器解析 [3] 下一頁 30個最常用css選擇器解析 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 30個最常用css選擇器解析 [4]
