在熟練掌握了class、id、標籤、*選擇器必須掌握，隨著css3的到來，作為一名前端，還需要掌握以下30種選擇器。
1. *：萬用字元選擇器
* *選擇器是選擇頁面上的全部元素，上面的**作用是把全部元素的margin和padding設為0，最基本的清除預設css樣式
方法*選擇器也可以應用到子選擇器中，例如下面的**：
#container *
這樣id為container 的所有子標籤元素都被選中了，並且設定了border。
相容性：ie6+ firefox chrome safari opera
2. #id：id選擇器
#container
id選擇器是css中效率最高的選擇器，使用的時候要保證id的唯一性。
相容性:ie6+ firefox chrome safari opera
3. .class:類選擇器
.error
類選擇器效率低於id選擇器，乙個頁面可以有多個class，並且class可以放在不同的標籤中使用。
相容性: ie6+ firefox chrome safari opera
4. x y：標籤組合選擇器
li a
標籤組合選擇器也是常用的選擇器。
相容性: ie6+ firefox chrome safari opera
5. x：標籤選擇器
a ul
如果你只是想要頁面中的某個標籤樣式改變，可以選擇使用標籤選擇器。
相容性: ie6+ firefox chrome safari opera
6. x:visited and x:link
a:link a:visted
偽類選擇器，最常用的為a標籤
相容性: ie7+ firefox chrome safari opera
7. x + y：毗鄰元素選擇器
ul + p
毗鄰元素選擇器，匹配的是所有緊隨x元素之後的同級元素y
相容性: ie7+ firefox chrome safari opera
8. x > y：子元素選擇器
div#container > ul
匹配#container下的所有子元素。關於x>y和x y的區別請看下面的html例項：
list item
child
list item
list item
list item
選擇器#container > ul
只會匹配到第乙個ul，也就是#container的子元素ul，而不是li裡面的ul，但是div ul則可以匹配到所有div裡面的ul。
相容性: ie7+ firefox chrome safari opera
9. x ~ y：
ul ~ p
匹配任何在x元素之後的同級p元素。也就是選擇了ul之後的同級所有的元素。
相容性: ie7+ firefox chrome safari opera
10. x[title]：屬性選擇器
a[title]
匹配具有某屬性的標籤，例如例項中是匹配具有title屬性的a標籤。
相容性: ie7+ firefox chrome safari opera
11. x[href="foo"]
a[href=""]
也屬於屬性選擇器，匹配屬性中為某個值的標籤。例如例項中匹配的為href=""的a標籤，而其他鏈結的a標籤不選擇。
相容性: ie7+ firefox chrome safari opera
12. x[href*="nettuts"]
a[href*="tuts"]
屬於屬性選擇器，匹配href中所有含有tuts的標籤。正則匹配
相容性: ie7+ firefox chrome safari opera
與上面的屬相選擇標籤類似，但是匹配的以http開頭的a標籤，正則匹配
相容性: ie7+ firefox chrome safari opera
匹配屬性中以.jpg結尾的標籤，正則匹配，也是屬性選擇器的一種
相容性: ie7+ firefox chrome safari opera
15. x[data-*="foo"]
如果你要匹配所有的鏈結，你可以通過下面的css來實現：
但是如果我們給a標籤新增乙個data-filetype屬性，我們就可以使用下面的css來快速的選擇我們需要匹配的標籤了。
image link
a[data-file type="image"]
相容性: ie7+ firefox chrome safari opera
16. x[foo~="bar"]
a[data-info~="external"]
a[data-info~="image"]
匹配屬性中具有多個空格分隔的值、其中乙個值等於「bar」的x元素，例如下面的例子：
相容性: ie7+ firefox chrome safari opera
17. x:checked
input[type=radio]:checked
這個選擇器主要用於checkbox，選擇checkbox為當前選中的那個標籤。
相容性: ie9 firefox chrome safari opera
18. x:after
.clearfix :after .clearfix
before 和after是在選擇的標籤之前或者之後插入內容，一般用於清除浮動，但是對於ie6、ie7是不可用的。
相容性: ie8+ firefox chrome safari opera
19. x:hover
div:hover
最常用的就是a標籤了，但是在ie6瀏覽器下除了a標籤之外，其他標籤div:hover不匹配。
相容性:ie6+
20. x:not(selector)
*:not(p)
選擇除了（）中選擇器之外的標籤元素。
相容性:ie9 firefox chrome safari opera
22. x::pseudoelement
p::first-line
p::first-letter
分別用於匹配元素的第一行和第乙個字母。看例項：
相容性:ie6+ firefox chrome safari opera
23. x:nth-child(n)
li:nth-child(3)
匹配x元素中從頭數第幾個標籤，例如上面的**是匹配的是第三個li標籤。
相容性:ie9 firefox 3.5+ chrome safari opera
24. x:nth-last-child(n)
li:nth-last-child(2)
與上乙個選擇器相反，這個選擇器是倒序匹配第幾個標籤，上面的**的意思是匹配倒數第二個li標籤
相容性:ie9 firefox 3.5+ chrome safari opera
25. x:nth-of-type(n)
ul:nth-of-type(3)
與:nth-child()作用類似，但是僅匹配使用同種標籤的元素
相容性: ie9 firefox 3.5+ chrome safari opera
26. x:first-child
ul li:first-child
匹配其父元素的第n個子元素，第乙個編號為1
相容性：ie7+ firefox chrome safari opera
27. x:last-child
ul > li:last-child
匹配其父元素的倒數第n個子元素，第乙個編號為1
相容性：ie9 firefox chrome safari opera
29. x:only-child
div p:only-child
匹配父元素下僅有的乙個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
相容性：ie9 firefox chrome safari opera
30. x:only-of-type
li:only-of-type
匹配父元素下使用同種標籤的唯一乙個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
相容性：ie9 firefox 3.5+ chrome safari opera
31. x:first-of-type
li:only-of-type
匹配父元素下使用同種標籤的第乙個子元素，等同於:nth-of-type(1)
相容性：ie9 firefox 3.5+ chrome safari opera
CSS 選擇器彙總
css中的選擇器 選擇器 通過選擇器，可以選擇頁面中的指定元素 元素選擇器 作用 根據標籤名稱來選中指定的元素 語法 標籤名稱 例子 p h1 div id選擇器 作用 根據id名稱來選中指定的元素 語法 id屬性值 例子 類選擇器 作用 根據類名來選中指定的元素 語法 class屬性值 乙個標籤裡...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...