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