CUF_meeting_knowledge_share
CUF_meeting_knowledge_share copied to clipboard
Published
20 hours ago •
hjzheng
hjzheng
2014-8-12 CSS选择器
-
CSS选择器 (Chun Lin Yang) 大家在使用CSS选择器的时候，由于考虑浏览器的兼容性，基本上使用的都是些简单的选择器，不但错过一些高级选择器的使用，还错误的认为IE8不支持某些高级选择器，所以希望下面的选择器兼容表格，可以让你大胆的使用某些高级选择器。
选择器 Example description IE FireFox Chrome 基本选择器 **选择所有元素 7 1 0.2 #id#header选择 id="header" 的元素 5 1 0.2 .class.item选择 class="item" 的所有元素 full 7, part 5 1 0.2 Elementp选择所有 <p> 元素 5 1 0.2 Element,Elementdiv,p选择所有<div>和<p> 元素 5 1 0.2 属性选择器 [attribute][target]选择具有target属性的所有元素 7 1 0.2 [attribute=value][target=_black]选择具有target='_black'的所有元素 7 1 0.2 [attribute~=value][class~=item]选择具有class属性且含有单词item的元素 7 1 0.2 [attribute*=value][title*=flower]选择具有title属性且含有flower的元素 7 1 0.2 [attribute^=value][title^=a]选择具有title属性且vlaue以a开头的元素 7 1 0.2 [attribute$=value][title$=z]选择具有title属性且value以z结尾的元素 7 1 0.2 层次选择器 Element+Elementdiv+p选择紧接在<div>元素之后的<p>元素 7 1 0.2 Element~Elementdiv~p选择前面有<div>元素的每个<p>元素 7 1 0.2 Element Elementdiv p选择<div>元素包含的所有<p>元素 5 1 0.2 Element>Elementdiv>p选择<div>元素直接子元素为<p>的元素 7 1 0.2 伪类选择器 动态伪类选择器 :linka:link选择未被访问过的a元素 5 1 0.2 :visiteda:visited选择已被访问过的a元素 5 1 0.2 :activea:active选择激活状态的a元素 8 1 0.2 :hovera:hover选择鼠标悬停在a元素上 full 7, part 5 1 0.2 :foucsa:focus选择获得焦点的a元素 8 1 0.2 UI元素伪类状态选择器 :checkedinput:checked选择选中的checkbox或者radio元素 9 1 0.4 :enabledinput:enabled选择启用的input元素 9 1 0.2 :disabledinput:disbaled选择禁用的input元素 9 1 0.2 目标伪类选择器 :targeta:target选择当前活动的<a>元素 9 1 0.2 结构伪类选择器 :nth-childli:nth-child(2)选择li父级下的第二个子元素，并且这个元素还的是li元素 9 1 0.4 :nth-last-childli:nth-last-child(2)选择li父级下的第二个子元素(从后计算)，并且这个元素还是li元素 9 1 0.4 :nth-of-typeli:nth-of-child(2)选择li父级下的第二个li元素 9 1 0.4 :nth-last-of-typeli:nth-last-of-type(2)选择li标签父级下的第二个li元素(从后计算) 9 1 0.4 :first-childli:first-child选择li父级下的第一个子元素，并且这个元素还是li元素 9 1 0.4 :first-of-typeli:first-of-type选择li父级下的第一个li子元素 9 1 0.4 :last-childli:last-child选择li父级下的最后一个子元素，并且这个元素还是li元素 9 1 0.4 :last-of-typeli:last-of-type选择li父级下的最后一个li子元素 9 1 0.4 :only-childli:only-child选择li父级下只含有一个子元素,并且这个元素还是li元素 9 1 0.4 :only-of-typeli:only-of-child选择li父级下只含有一个li子元素 9 1 0.4 :emptyli:empty选择子元素为空的li标签(子元素包含文本节点) 9 1 0.4 否定伪类选择器 :notdiv:not(p)选择子元素中不含有p的div元素 9 1 0.2 伪元素选择器 ::beforediv::before在每个<div>元素的内容之前插入内容 8 1 0.2 ::afterdiv::after在每个<div>元素的内容之后插入内容 8 1 0.2 ::first-linep::first-line选择每个<p>元素的内容的第一行 5.5 1 0.2 ::first-letterp::first-letter选择每个<p>元素的内容的首字母 5.5 1 0.2 Examples (Hao Ju Zheng)
让IE8支持CSS3选择器 (Hao Ju Zheng) http://selectivizr.com/
Here is official website for Selectors Level 3. http://www.w3.org/TR/selectors/#target-pseudo
CSS属性完全兼容列表：http://csscreator.com/properties IE属性兼容列表：http://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85).aspx