在前面的文章中，我們在mf1288.com上介紹了《五種必須知道的CSS選擇器》，現(xiàn)在向大家介紹，還需要學(xué)習(xí)的另外十二種CSS選擇器。如果你還沒有用過，就好好學(xué)習(xí)一下，如果你已經(jīng)熟知了就當(dāng)是溫習(xí)。一、X:link X:visited X:hover X:active 偽類Example Source…
在前面的文章中，我們在mf1288.com上介紹了《五種必須知道的CSS選擇器》，現(xiàn)在向大家介紹，還需要學(xué)習(xí)的另外十二種CSS選擇器。如果你還沒有用過，就好好學(xué)習(xí)一下，如果你已經(jīng)熟知了就當(dāng)是溫習(xí)。
一、X:link X:visited X:hover X:active 偽類
Example Source Code
a:link { color: red; }
a:visted { color: purple; }
偽類選擇器，visted已被訪問過的樣式，hover鼠標(biāo)經(jīng)過的樣式，link未被訪問的樣式。三種偽類選擇器常用于鏈接，但不是說只適用于鏈接，可惜的是IE6只支持將這三種偽類選擇器作用于鏈接。
這里明河說明一點(diǎn)，由于CSS優(yōu)先級的關(guān)系(后面比前面的優(yōu)先級高)，這幾個偽類的書寫順序，一般是link、visted、hover、active。
二、X + Y 相鄰選擇器
Example Source Code
ul + p {
color: red;
}
相鄰選擇器，上述代碼中就會匹配在ul后面的第一個p，將段落內(nèi)的文字顏色設(shè)置為紅色。(只匹配一個元素)
三、X > Y 子選擇器
子選擇器，留意X > Y與X Y的區(qū)別，后者是子孫選擇器，即無視層級，而X > Y是字選擇器，只匹配X下的子元素Y。mf1288.com
從理論上來講X > Y是值得提倡選擇器，可惜IE6不支持。
四、X ~ Y 相鄰選擇器
Example Source Code
ul ~ p {
color: red;
}
相鄰選擇器，與X+Y類似，不同的是X ~ Y匹配的是元素集合，比如上述代碼，匹配的是所有ul相鄰的p
五、X[title] 屬性選擇器
Example Source Code
a[title] {
color: green;
}
屬性選擇器，比如上述代碼匹配的是帶有title屬性的鏈接元素。
六、X[title=""] 另一種屬性選擇器
Example Source Code
a[title="我愛CSS-mf1288.com"]{
color:#096;
}
屬性選擇器，上述代碼不只匹配帶有title屬性，更匹配title屬性等于"mf1288.com"的鏈接元素。[]內(nèi)不只可用title屬性，還可以使用其他屬性。
七、X[title*=""] 模糊匹配屬性選擇器
Example Source Code
a[title*="明"]{
color:#096;
}
加了*號，意味著是模糊匹配，比如上述代碼，會匹配title屬性為明或明河或明河共影等帶有明字的鏈接屬性。
八、X[title^=""] 另一種模糊匹配屬性選擇器
Example Source Code
a[title^="明"]{
color:#096;
}
模糊匹配,與*的作用相反，^起到排除的作用，比如上述代碼，會匹配title屬性不帶有明字的鏈接屬性。
九、X[href$=""] 很實(shí)用的屬性選擇器
Example Source Code
a[href$=".png"] {
color: red;
}
在屬性選擇器中多一個$符號，用于匹配結(jié)尾為特定字符串的元素，比如上述代碼匹配的就是href屬性值的結(jié)尾為.png的鏈接。
十、X[data-*=""] 不太常用的屬性選擇器
Example Source Code
a[data-filetype="image"] {
color: red;
}
data-filetype這個屬性目前用的實(shí)在不多，但有些場合非常好用。比如我要匹配所有的數(shù)據(jù)類型為圖片的鏈接，如果使用X[href$=""]的方式如下：
Example Source Code
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
而使用data-filetype，只要：
Example Source Code
a[data-filetype="image"] {
color: red;
}
當(dāng)然前提是你給每一個鏈接加上data-filetype屬性。
十一、X[foo~=""] 非常少用的選擇器
Example Source Code
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
這也是非常少用的選擇器，加上~號，有一種情況特別適用，比如你有個data-filetype=”external image”屬性，這時候我希望分別針對external和image樣式控制。
Example Source Code
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
上述代碼會匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。
十二、X:checked 另一種偽類選擇器
Example Source Code
input[type=radio]:checked {
border: 1px solid black;
}
這個偽類選擇器只用于匹配帶有checked屬性的元素，比如radio、checkbox即單選框和多選框。目前這個偽類選擇器，IE9下都不支持，非IE瀏覽器基本上都支持。在后面mf1288.com文章中，我們還將繼續(xù)介紹CSS選擇器，我們一起期待。
