一、除ie6外瀏覽器支援的css選擇器
6. x:link x:visited x:hover x:active
a:link
a:visted
偽類選擇器，visted已被訪問過的樣式，hover滑鼠經過的樣式，link未被訪問的樣式。三種偽類選擇器常用於鏈結，但不是說只適用於鏈結，可惜的是ie6只支援將這三種偽類選擇器作用於鏈結。
這裡說明一點，由於css優先順序的關係(後面比前面的優先順序高)，這幾個偽類的書寫順序，一般是link、visted、hover、active。
7. x + y（相鄰）
ul + p
相鄰選擇器，上述**中就會匹配在ul後面的第乙個p，將段落內的文字顏色設定為紅色。(只匹配乙個元素)
8. x > y（子）
子選擇器，留意x > y與x y的區別，前者是子孫選擇器，即無視層級，而x y是字選擇器，只匹配x下的子元素y。
從理論上來講x > y是值得提倡選擇器，可惜ie6不支援。
9. x ~ y
ul ~ p
相鄰選擇器，與x+y類似，不同的是x ~ y匹配的是元素集合，如上述**，匹配的是所有ul相鄰的p
10. x[title]
a[title]
屬性選擇器，如上述**匹配的是帶有title屬性的鏈結元素。
11. x[title=""]
a[title="maomao"]
屬性選擇器，上述**不只匹配帶有title屬性，更匹配title屬性等於maomao的鏈結元素。內不只可用title屬性，還可以使用其他屬性。
12. x[title*=""]
a[title*="mao"]
加了*號，意味著是模糊匹配，如上述**，會匹配title屬性為mao或maomao或maomao520等帶有maomao的鏈結屬性。
13. x[title^=""]
a[title^="maomao"]
模糊匹配,與*的作用相反，^起到排除的作用，比如上述**，會匹配title屬性不帶有maomao的鏈結屬性。
14. x[href$=""]
a[href$=".png"]
在屬性選擇器中多乙個$符號，用於匹配結尾為特定字串的元素，比如上述**匹配的就是href屬性值的結尾為.png的鏈結。
15.x[data-*=""]
a[data-filetype="image"]
data-filetype這個屬性目前用的實在不多，但有些場合非常好用。比如我要匹配所有的資料型別為的鏈結，如果使用x[href$=""]的方式如下：
而使用data-filetype，只要：
a[data-filetype="image"]
當然前提是你給每乙個鏈結加上data-filetype屬性。
16.x[foo~=""]
a[data-info~="external"]
a[data-info~="image"]
這也是非常少用的選擇器，加上~號，有一種情況特別適用，比如你有個data-filetype=」external image」屬性，這時候我希望分別針對external和image樣式控制。
a[data-info~="external"]
a[data-info~="image"]
上述**會匹配data-filetype=」external」、data-filetype=」image」、data-filetype=」external image」的a。
17.x:checked
input[type=radio]:checked
這個偽類選擇器只用於匹配帶有checked屬性的元素，比如radio、checkbox即單選框和多選框。
目前這個偽類選擇器，ie9下都不支援，非ie瀏覽器基本上都支援。
二、除ie8以下的瀏覽器支援的css選擇器
18.x:after
.clearfix:after
.clearfix
我想上面這段**，很多朋友都非常熟悉，是清理浮動時常用的hack方法。:after偽類與content結合使用，用於往元素類追加內容。:after偽類還有個妙用：用於產生陰影。
19.x:hover
div:hover
hover在前面已經介紹過，ie6下只支援a的hover。
這裡提到乙個很有意思的東西，即使用border-bottom: 1px solid black; 要好於text-decoration: underline；從實際的效果來看，使用border-bottom的距離比text-decoration來的合理，但使用border-bottom存在一些風險，比如顏色問題。
20.x:not(selector)
div:not(#container)
否定偽類選擇器，這還是比較好理解的，上述將會把非id為container的div的字型顏色設定為藍色。
:not偽類ie8並不支援，ie9已經支援了。
21.x::pseudoelement
p::first-line
::偽類，用於給元素的片段新增樣式，這如何理解呢？比如你要讓乙個段落的第一行的文字加粗，那麼這個選擇器是不二之選。
除此之外，你還可以給第乙個字加上特殊樣式，這個應用還是非常常見的
p::first-letter
ie6居然支援！這足以讓人驚喜的…..
三、css3 結構性偽類選擇器
22.x:nth-child(n)
li:nth-child(3)
:nth-child(n)，用於匹配索引值為n的子元素。索引值從1開始。
x:nth-child()用法實際上有三種變化。x:nth-child()更強大的用處在於奇偶匹配。有興趣的請看《understanding :nth-child pseudo-class expressions》,《css3 :nth-child()偽類選擇器》
23.x:nth-last-child(n)
li:nth-last-child(2)
:nth-child(n)，是從第乙個開始算索引，而x:nth-last-child(n)是從最後乙個開始算索引。
24.x:nth-of-type(n)
ul:nth-of-type(3)
nth-of-type與nth-child的效果是驚人的相似，想要更多的了解nth-of-type請看《alternative for :nth-of-type() and :nth-child()》，《:nth-of-type(n)》。
25.x:nth-last-of-type(n)
ul:nth-last-of-type(3)
:nth-last-child效果相似。
26.x:first-child
ul li:first-child
匹配子集的第乙個元素。ie7就可以支援了，這個偽類還是非常有用的。
27.x:last-child
ul > li:last-child
與:first-child效果相反
留意ie8支援:first-child,但不支援:last-child。
28.x:only-child
div p:only-child
這個偽類一般用的比較少，比如上述**匹配的是div下的有且僅有乙個的p，也就是說，如果div內有多個p，將不匹配。
29.x:only-of-type
li:only-of-type
與:only-child類似。
30.x:first-of-type
ul:first-of-type
等價於:nth-of-type(1)，匹配集合元素中的第乙個元素。
尊重原創：
CSS常用選擇器
class 選擇器 選擇並設定 class intro 的元素的樣式 intro id選擇器 為 id firstname 的元素設定樣式 firstname 標籤選擇器 選擇並設定所有 元素的樣式 p並集選擇器 使用 逗號 連線兩個選擇器 選擇並設定所有 樣式和所有 元素的樣式 h1,p 後代選擇...
CSS 常用選擇器
選擇器是指通過一定的語法規則選取到對應的html標記，然後給這個對應的html標記設定樣式 1.標籤選擇器 寫法 標籤名 標籤選擇器影響範圍大，一般用來做一些通用設定，或用在層級選擇器中。舉例 div 這是第乙個div 這是第二個div 2.類選擇器 寫法 類名 通過類名來選擇元素，乙個類可應用於多...
css常用選擇器
css 層疊樣式表 作用 美化html 行內式 css選擇器 外鏈式為單獨書寫的乙個css檔案，內容類似內嵌式，但是沒有內嵌式的外部標籤 如下 標籤選擇器 p color darkseagreen font family 楷體 font weight 200 id選擇器 id color india...