css各種選擇器的詳細介紹

一、基本選擇器

1. * 通用元素選擇器，符合任何元素

2. E 標籤選擇器，匹配所有使用E標籤的元素

3. .info class選擇器，匹配所有class屬性中包含info的元素

4. #footer id選擇器，符合所有id屬性等於footer的元素

 

二、多元素的組合選擇器

5. E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔

6. E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔

7. E > F 子元素選擇器，匹配所有E元素的子元素F

#8. E + F 鄰近元素選擇器，符合所有緊接在E元素之後的同級元素F

 

三、CSS 2.1 屬性選擇器

9. E[att] 符合所有具有att屬性的E元素，不考慮它的值。 （注意：E在此處可以省略，例如"[cheacked]"。以下同。）

10. E[att=val] 匹配所有att屬性等於"val"的E元素

11. E[att~=val] 符合所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素

#12. E[att|=val] 符合所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"val"開頭的E元素，主要用於lang屬性，如"en"、"en-us"、"en-gb"等等

 

#四、CSS 2.1中的偽類別

#13. E:first-child 符合父元素的第一個子元素

#14. E:link 符合所有未點擊的連結

15. E:visited 符合所有已點擊的連結

#16. E:active 符合滑鼠已經按下、尚未被釋放的E元素

17. E:hover 匹配滑鼠懸停其上的E元素

18. E:focus 匹配獲得當前焦點的E元素

19. E:lang(c) 符合lang屬性等於c的E元素

 

五、 CSS 2.1中的偽元素

20. E:first-line 匹配E元素的第一行

21. E:first-letter 匹配E元素的第一個字母

22. E:before 在E元素之前插入生成的內容

23. E:after 在E元素之後插入產生的內容

 

六、CSS 3的同級元素通用選擇器

#24. E ~ F 符合任何在E元素之後的同級F元素

 

#七、CSS 3 屬性選擇器

25. E[att^="val"] 屬性att的值以"val"開頭的元素

#26. E[att$="val"] 屬性# att的值以"val"結尾的元素

27. E[att*="val"] 屬性att的值包含"val"字串的元素

# 

八、CSS 3中與使用者介面相關的偽類別

28. E:enabled 符合表單中啟動的元素

#29. E:disabled 符合表單中停用的元素

30. E:checked 符合表單中被選取的radio（單選方塊）或checkbox（複選框）元素

31. E::selection 匹配使用者目前選取的元素

 

九、CSS 3中的結構性偽類

32. E:root 匹配文檔的根元素，對於HTML文檔，就是HTML元素

33. E:nth-child(n) 符合其父元素的第n個子元素，第一個編號為1

34. E:nth-last -child(n) 符合其父元素的倒數第n個子元素，第一個編號為1

#35. E:nth-of-type(n) 與:nth-child()作用類似，但只符合使用同種標籤的元素

36. E:nth-last-of-type(n) 與:nth -last-child() 作用類似，但只符合使用同種標籤的元素

37. E:last-child 符合父元素的最後一個子元素，等同於:nth -last-child(1)

38. E:first-of-type 符合父元素下使用同種標籤的第一個子元素，等同於:nth-of- type(1)

39. E:last-of-type 符合父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type( 1)

40. E:only-child 符合父親元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1) :nth-last-child(1)

41. E:only-of-type 符合父元素下使用同種標籤的唯一一個子元素，等同於:first-of -type:last-of-type或:nth-of-type(1):nth-last-of-type(1)

42. E:empty 符合一個不包含任何子元素的元素，注意，文本節點也被看作子元素

 

#十、CSS 3的反選偽類

43. E:not(s) 符合不符合目前選擇器的任何元素

 

十一、CSS 3中的:target 偽類

44. E:target 符合文件中特定"id"點擊後的效果

以上是css各種選擇器的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！