search

hjzheng / CUF_meeting_knowledge_share

Record CUF team meeting knowledge share
121 stars 49 forks source link

2014-8-12 CSS选择器 #3

Open hjzheng opened 10 years ago

hjzheng commented 10 years ago

  1. 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
    Element p 选择所有 <p> 元素 5 1 0.2
    Element,Element div,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+Element div+p 选择紧接在<div>元素之后的<p>元素 7 1 0.2
    Element~Element div~p 选择前面有<div>元素的每个<p>元素 7 1 0.2
    Element Element div p 选择<div>元素包含的所有<p>元素 5 1 0.2
    Element>Element div>p 选择<div>元素直接子元素为<p>的元素 7 1 0.2
    伪类选择器
    动态伪类选择器
    :link a:link 选择未被访问过的a元素 5 1 0.2
    :visited a:visited 选择已被访问过的a元素 5 1 0.2
    :active a:active 选择激活状态的a元素 8 1 0.2
    :hover a:hover 选择鼠标悬停在a元素上 full 7, part 5 1 0.2
    :foucs a:focus 选择获得焦点的a元素 8 1 0.2
    UI元素伪类状态选择器
    :checked input:checked 选择选中的checkbox或者radio元素 9 1 0.4
    :enabled input:enabled 选择启用的input元素 9 1 0.2
    :disabled input:disbaled 选择禁用的input元素 9 1 0.2
    目标伪类选择器
    :target a:target 选择当前活动的<a>元素 9 1 0.2
    结构伪类选择器
    :nth-child li:nth-child(2) 选择li父级下的第二个子元素，并且这个元素还的是li元素 9 1 0.4
    :nth-last-child li:nth-last-child(2) 选择li父级下的第二个子元素(从后计算)，并且这个元素还是li元素 9 1 0.4
    :nth-of-type li:nth-of-child(2) 选择li父级下的第二个li元素 9 1 0.4
    :nth-last-of-type li:nth-last-of-type(2) 选择li标签父级下的第二个li元素(从后计算) 9 1 0.4
    :first-child li:first-child 选择li父级下的第一个子元素，并且这个元素还是li元素 9 1 0.4
    :first-of-type li:first-of-type 选择li父级下的第一个li子元素 9 1 0.4
    :last-child li:last-child 选择li父级下的最后一个子元素，并且这个元素还是li元素 9 1 0.4
    :last-of-type li:last-of-type 选择li父级下的最后一个li子元素 9 1 0.4
    :only-child li:only-child 选择li父级下只含有一个子元素,并且这个元素还是li元素 9 1 0.4
    :only-of-type li:only-of-child 选择li父级下只含有一个li子元素 9 1 0.4
    :empty li:empty 选择子元素为空的li标签(子元素包含文本节点) 9 1 0.4
    否定伪类选择器
    :not div:not(p) 选择子元素中不含有p的div元素 9 1 0.2
    伪元素选择器
    ::before div::before 在每个<div>元素的内容之前插入内容 8 1 0.2
    ::after div::after 在每个<div>元素的内容之后插入内容 8 1 0.2
    ::first-line p::first-line 选择每个<p>元素的内容的第一行 5.5 1 0.2
    ::first-letter p::first-letter 选择每个<p>元素的内容的首字母 5.5 1 0.2

    Examples (Hao Ju Zheng)

    让IE8支持CSS3选择器 (Hao Ju Zheng) http://selectivizr.com/

clyang82 commented 10 years ago

Here is official website for Selectors Level 3. http://www.w3.org/TR/selectors/#target-pseudo

hjzheng commented 10 years ago

CSS属性完全兼容列表：http://csscreator.com/properties IE属性兼容列表：http://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85).aspx

hjzheng commented 9 years ago

关于CSS 选择器 PPT：http://get-set.cn/CUF_PPTs/CSS_Selector.html