DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁制作教程:浏覽器與CSS選擇器對應表
CSS網頁制作教程:浏覽器與CSS選擇器對應表
編輯:CSS進階教程     

網頁教學網這張表只是作為網頁制作學習筆記,方便自己忘記的時候查找。
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
  1. :hover 在IE6中只有a元素可用。
  2. E:empty 貌似在webkit核心浏覽器中有些小bug。
  3. 如果這個bug依然存在,不太確定如何測試。
  4. 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選擇器的支持情況待測。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved