css3选择器笔记

css3选择器
    
element,element        div,p            选择p元素和div元素
element element        div p            选择div内的所以p元素
element>element        div>p            选择父元素是div的p元素
element+element        div+p            选择紧接在div元素之后的所有p元素

[attribute]        [type]            选择含有type属性的元素
[attribute=value]    [type=button]        选择属性type为button的元素
[attribute~=value]    [class~=flower]        选择属性包含的flower单词的元素
[attribute^=value]    [class^=flo]        选择属性以flo字母开头的元素
[attribute$=value]    [class$=wer]        选择属性以wer字母结尾的元素
[attribute*=value]    [class*=owe]        选择舒心包含owe字母的元素

:link            a:link           　　 选择未访问链接
:visited        a:visited       　　 选择已访问链接
:active            a:active        　　选择激活中链接
:hover            a:hover          　  选择盘旋中链接
:focus            input:focus        选择聚焦的表单
:before            p:before        定位元素内容前
:after            p:after            定位元素内容后

:first-letter        p:first-letter        选择p元素的第一个字母    
:first-line        p:first-line        选择p元素的第一行
:first-child        p:first-child        选择是第一个儿子的p元素
:last-child        p:last-child        选择是最后一个儿子的p元素
:only-child        p:only-child        选择是唯一儿子的p元素
:nth-child(n)        p:nth-child(3)        选择是第三儿子的p元素
:nth-last-child(n)    p:nth-last-child(3)    选择是倒数第三儿子的p元素

:first-of-type        p:first-of-type        选择在同类元素中排第一的p元素
:last-of-type        p:last-of-type        选择在同类元素中排倒数第一的p元素
:nth-of-type        p:nth-of-type(2)    选择在同类元素中排第二的p元素
:nth-last-of-type    p:nth-of-type(2)    选择在同类元素中排倒数第二的p元素


:empty            p:empty            选择没有子元素的p元素
:enabled        input:enabled        选择启用了的表单元素
:disabled        input:disabled        选泽禁用了的表单元素
:checked        input:checked        选择被选中的表单元素
:not(selector)        :not(p)            选择非p元素的元素
::selection        ::selection        选择被鼠标选取的区域