1. 程式人生 > >css-選擇器大彙總

css-選擇器大彙總

1、*(清空選擇器 / 通用選擇符)::相容性----IE6+、Firefox、Chrome、Safari、Opera

2、#X(ID選擇器)::相容性----IE6+、Firefox、Chrome、Safari、Opera

3、.X(類選擇器)::相容性----IE6+、Firefox、Chrome、Safari、Opera

4、X  Y(後代/descendant選擇器)::相容性----IE6+、Firefox、Chrome、Safari、Opera

5、X::(標籤/型別選擇器)::相容性----IE6+、Firefox、Chrome、Safari、Opera

6、X:visited、X:link(偽類選擇器)::相容性----

IE7+、Firefox、Chrome、Safari、Opera

7、X+Y(相鄰選擇器)(直接後繼元素)::相容性----IE7+、Firefox、Chrome、Safari、Opera

8、X>Y(子代選擇器)(直接子元素)::相容性----IE7+、Firefox、Chrome、Safari、Opera

9、X~Y(普通相鄰選擇器)(後繼所有的兄弟元素)::相容性----IE7+、Firefox、Chrome、Safari、Opera

10、X[title](屬性選擇器)::相容性----IE7+、Firefox、Chrome、Safari、Opera

11、X[href="foo"]::相容性----

IE7+、Firefox、Chrome、Safari、Opera

12、X[href*="foo"](指向屬性值裡包含有foo的元素,如:foo.com或com.foo或stu.foo.dl)::相容性----IE7+、Firefox、Chrome、Safari、Opera

13、X[href^="href"](指向屬性值開頭就包含的字串,如:a[href^="http"])::相容性----IE7+、Firefox、Chrome、Safari、Opera

14、X[href$="href"](指向屬性值結尾就包含的字串,如:a[href^=".jpg"])::相容性----IE7+、Firefox、

Chrome、Safari、Opera

15、X[data-*="foo"]::相容性----IE7+、Firefox、Chrome、Safari、Opera

16、X[foo~="bar"]`~`符號可以定位那些某屬性值是空格分隔多值的標籤::相容性----IE7+、Firefox、Chrome、Safari、Opera

17、 X:checked(定位那些被選中的單選框和多選框::相容性----IE9+、Firefox、Chrome、Safari、Opera

18、X:after(X之後新增內容或樣式)(當overflow:hidden方法無用時,可使用這個辦法,另外樣式裡可新增clear:both;避免對之後的元素造成影響,必定記住這是個好辦法!!!根據CSS3標準,可以用兩個冒號::)::相容性----IE8+、Firefox、Chrome、Safari、Opera

19、X:hover(滑鼠滑過起作用,另外舊版本里只有a標籤有hover作用)::相容性----IE6+(IE6只能在錨點標籤上起作用)、Firefox、Chrome、Safari、Opera

20、X:not(selector)(取反偽類)(把id為‘container’之外的所有div標籤都選中,如:div:not(#container)

::相容性----IE9+、Firefox、Chrome、Safari、Opera

21、X::pseudoElement(我們可以使用`::`來選中某標籤的部分內容,如第一段、第一行、第一個字,如:p::first-line、p::first-letter、p::first-line,舊版本瀏覽器用一個冒號:,`:first-line`,`:first-letter`,`:before`,`:after`。::相容性----IE6+、Firefox、Chrome、Safari、Opera

22、X:nth-child(n)(n從1開始順著數,還可以寫成`li:nth-child(4n)`去每隔3個元素獲取一次標籤)::相容性----IE9+、Firefox3.5+、Chrome、Safari

23、X:nth-last-child(n)倒著數回去::相容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

24、X:nth-of-type(n)(有5個`ul`標籤。如果你只想對其中的第三個進行修飾,如:ul:nth-of-type(3)::相容性----IE9+、Firefox3.5+、Chrome、Safari

25、X:nth-last-of-child(n)倒著數回去::相容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

26、X:first-child::相容性----IE7+、Firefox、Chrome、Safari、Opera

27、X:last-child::相容性----IE9+、Firefox、Chrome、Safari、Opera

28、X:only-child(獲取只有一個子標籤的父標籤)::相容性----IE9+、Firefox、Chrome、Safari、Opera

29、X:only-of-type定位某標籤只有一個子標籤的目標::相容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

30、X:first-of-type(指定標籤的第一個兄弟標籤::相容性----IE9+、Firefox3.5+、Chrome、Safari、Opera

手碼的,有錯誤望幫忙指正!!! 來源於http://www.w3cschool.cn/css/css-selector.html