1. 程式人生 > >CSS選擇器IE支援情況彙總

CSS選擇器IE支援情況彙總

基礎選擇器(Basic Selectors)

元素選擇器(Type selectors)/類選擇器(Class selectors)/ID選擇器(ID selectors) - Internet Explorer

element { style properties }

.class_name { style properties }

#id_value { style properties }

通配選擇器(Universal selectors) - Internet Explorer 7

* { style properties }

屬性選擇器(Attribute selectors) - Internet Explorer 基礎支援
  • [attr]: 表示帶有以 attr 命名的屬性的元素。
  • [attr=value]: 表示帶有以 attr 命名的,且值為”value”的屬性的元素。
  • [attr~=value]: 表示帶有以 attr 命名的屬性的元素,並且該屬性是一個以空格作為分隔的值列表,其中至少一個值為”value”。
  • [attr|=value]: 表示帶有以 attr 命名的屬性的元素,屬性值為“value”或是以“value-”為字首開頭。
  • [attr^=value]: 表示帶有以 attr 命名的,且值是以”value”開頭的屬性的元素。
  • [attr$=value]: 表示帶有以 attr 命名的,且值是以”value”結尾的屬性的元素。
  • [attr*=value]: 表示帶有以 attr 命名的,且值包含有”value”的屬性的元素。

組合選擇器(Combinators)

相鄰兄弟選擇器(Adjacent sibling combinator) Internet Explorer 7

former_element + target_element { style properties }

+ 在 Internet Explorer 7 中,當一個元素動態的被插入到目標元素之前時,瀏覽器不會正確的更新樣式.
+ 在 Internet Explorer 8 中,如果一個元素是通過點選一個連結動態的被插入的話,直到此連結失去焦點之前該元素的第一個子代元素的樣式是不會生效的.
通用兄弟選擇器(General sibling combinator) Internet Explorer 7

former_element ~ target_element { style properties }

子選擇器(Child combinator) Internet Explorer 7

selector1 > selector2 { style properties }

後代選擇器(Descendant combinator)

selector1 selector2 { /* property declarations */ }

偽類(Pseudo classes)

:active - Internet Explorer 4.0 Support on the <a> element, Support on any element Internet Explorer 8.0
:any*
:any-link*
:checked - Internet Explorer 9.0
:default - Internet Explorer 未實現
:dir()*
:disabled - Internet Explorer 9.0
:empty - Internet Explorer 9.0
:enabled - Internet Explorer 9.0
:first/:left/:right - printing style
:first-child - Internet Explorer 7.0 不可動態新增項
:first-of-type - Internet Explorer 9.0
:fullscreen*
:focus - Internet Explorer 8.0
:focus-within - Internet Explorer 未實現
:hover - Internet Explorer 4.0 for <a> elements, for all elements Internet Explorer 7.0
:indeterminate
:in-range - Internet Explorer 未實現
:lang() - Internet Explorer 7.0
:last-child - Internet Explorer 9.0
:last-of-type - Internet Explorer 9.0
:link - Internet Explorer 3.0
:not() - Internet Explorer 9.0 基礎支援
:nth-child() - Internet Explorer 9.0
:nth-last-child() - Internet Explorer 9.0 基礎支援
:nth-last-of-type() - Internet Explorer 9.0 基礎支援
:nth-of-type() - Internet Explorer 9.0 基礎支援
:only-child - Internet Explorer 9.0 基礎支援
:only-of-type - Internet Explorer 9.0 基礎支援
:optional/:required/:valid/:invalid - Internet Explorer 10 基礎支援
:out-of-range - Internet Explorer 未實現
:placeholder-shown - Internet Explorer 未實現
:read-only - Internet Explorer 未實現
:read-write - Internet Explorer 未實現
:root - Internet Explorer 9
:scope - Internet Explorer 未實現
:target - Internet Explorer 9
:visited - Internet Explorer 基礎支援

按照LVHA的循順序宣告:link-:visited-:hover-:active
在觸控式螢幕上 :hover 基本不可用。

偽元素(Pseudo elements)

::after (:after) - Internet Explorer 8.0 :after support, Internet Explorer 9.0 ::after support, 不支援動畫和過渡
::backdrop*
::before (:before) - Internet Explorer 8.0 :before support, Internet Explorer 9.0 ::before support, 不支援動畫和過渡
::cue (:cue)
::first-letter (:first-letter) - Internet Explorer 9.0 基礎支援, Internet Explorer 5.5 Old one-colon syntax (:first-letter)
::first-line (:first-line) - Internet Explorer 9.0 基礎支援, Internet Explorer 5.5 Old one-colon syntax (:first-line)
::grammar-error*
::placeholder - Internet Explorer 10 -ms- 字首支援
::selection - Internet Explorer 9 基礎支援