網頁教學網這張表只是作為網頁制作學習筆記,方便自己忘記的時候查找。
1)關於子選擇器 ( > )
在ie7+標准模式,chrome,ff下開始支持了。有人說在ie7下,如果父元素與子元素之間有注釋的話就會失效,但是我沒有發現。
2) 臨近兄弟選擇器(+)
在ie7+標准模式。chrome,ff下開始支持了。但是,如果父元素與子元素之間有注釋的話就會失效。ie8沒有。
3)普通兄弟選擇器(~)
選擇該元素後面的所有兄弟節點,在ie7+標准模式,chrome,ff下支持。它和臨近兄弟節點選擇器的區別就是,前者就選擇後面所有的,不要求相鄰,但是後面必須是相鄰,且選擇一個。
CSS 2.1
↓ Selector / Browser → |
IE6 |
IE7 |
IE8 |
IE9 preview |
FF 3 |
FF 3.5 |
FF 3.6 |
Safari 3 |
Safari 4 |
Chrome 5 beta |
Opera |
Opera 10.5 beta |
↑ Selector / Browser → |
IE6 |
IE7 |
IE8 |
IE9 preview |
FF 3 |
FF 3.5 |
FF 3.6 |
Safari 3 |
Safari 4 |
Chrome 5 beta |
Opera |
Opera 10.5 beta |
* |
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E > F |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:first-child |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:hover |
Partial(1)
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:focus |
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E + F |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr~="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:before |
No
No
Yes
Yes
Buggy(4)
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:after |
No
No
Yes
Yes
Buggy(4)
Yes
Yes
Yes
Yes
Yes
Yes
Yes
CSS 3
↓ Selector / Browser → |
IE6 |
IE7 |
IE8 |
IE9 preview |
FF 3 |
FF 3.5 |
FF 3.6 |
Safari 3 |
Safari 4 |
Chrome 5 beta |
Opera |
Opera 10.5 beta |
↑ Selector / Browser → |
IE6 |
IE7 |
IE8 |
IE9 preview |
FF 3 |
FF 3.5 |
FF 3.6 |
Safari 3 |
Safari 4 |
Chrome 5 beta |
Opera |
Opera 10.5 beta |
E ~ F |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr^="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr$="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr*="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E[attr|="name"] |
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:root |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:nth-of-type |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:nth-last-of-type |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:first-of-type |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:last-of-type |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:only-of-type |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:only-child |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:last-child |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:nth-child |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:nth-last-child |
No
No
No
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:empty |
No
No
No
Yes
Yes
Yes
Yes
Buggy(2)
Yes (3)
Yes
Yes
Yes
E:target |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:checked |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E::selection |
No
No
No
Yes
No
No
No
Yes
Yes
Yes
Yes
Yes
E:enabled |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:disabled |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
E:not(s) |
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
- :hover 在IE6中只有a元素可用。
- E:empty 貌似在webkit核心浏覽器中有些小bug。
- 如果這個bug依然存在,不太確定如何測試。
- IE6不支持.class1.class2雙類選擇器。
IE8注意事項:
- E[attr]選擇器在值為空的時候或者寫錯的時候,將不會生效;
- IE8支持CSS2.1的所有屬性,支持偽類,但是不支持偽元素。
IE8中的IE7兼容模式
- E[attr] 和IE8一樣,值為空或寫錯的時候,無效;
- E[attr~=val]這裡唯一需要注意的是,屬性的值,區分大小寫;
- E[attr|=val]IE7有一些大小寫敏感的問題,但是通常可以正常使用;
- :first-child IE7 會將一個注釋或者文字節點當成first-child,而不是只有元素才是“子”元素。所以,如果在第一個子元素前有注釋或文字,IE7會匹配之而不是去匹配第一個子元素。
Safari/Chrome
- Safari3.2(事實上可以追溯到3.1)以上的版本已經完全的支持所有CSS選擇器了。
- Safari3.0基本上對CSS 2的選擇器支持很好,但不支持CSS3大部分新增的選擇器,而且對屬性選擇器的支持不是很完整。
- iPhone中的Safari有3.0和3.2兩個版本,對CSS的支持情況與PC/Mac版的支持情況一致。
- Android系統自帶的浏覽器基本上也是基於webkit核心的,其對於CSS選擇器的支持情況待測。