CSS选择器

简单概括一下CSS的选择器

基本选择器

*	通配符选择器	选择所有元素
E	元素选择器	文档元素
.class	类选择器	选择一个类下的所有元素
#id	ID选择器	选择一个id下的所有元素
E F	后代选择器	可以选择某个元素的后代元素
E > F	子元素选择器	选择直接的子元素(不包含后代元素)
E + F	相邻兄弟元素选择器	选择紧接一个元素后的元素(在 e,f具有相同的父元素,且相邻)
E ~ F	通用兄弟元素选择器	选择相邻元素后的所有元素

属性选择器

E[attr]	筛选具有attr属性的元素
E[attr="value"]	筛选具有attr属性,且该属性的值为value的元素
E[attr~="value"]	属性值为用空格分隔的字词列表，其中一个等于value的元素(包含只有一个值且该值等于val的情况)
E[attr^="value"]	筛选attr属性值以value开头的元素
E[attr$="value"]	筛选attr属性值以value结尾的元素
E[attr*="value"]	筛选attr属性值中包含value的元素
E[attr|="value"]	筛选attr属性值以val开头并且其后紧跟着 “-” 的元素

伪类选择器

动态伪类

常用的四个锚点伪类

:link	选取未被访问的链接
:hover	用于当用户把鼠标移动到元素上面时的效果
:active	用于用户点击元素那一下的效果
:focus	用于元素成为焦点(表单元素上常用)

UI元素状态伪类

1. :enabled与：disabled

   表单元素中的可用与不可用的两种状态

2. :checked

   状态选择器

PS:IE6至IE8均不支持以上三种选择器

nth选择器

CSS3结构类,CSS的新特性,一种支持变量计算的选择器,可以实现复杂的选择需求

:first-child	选择某个元素的第一个子元素
:last-child	选择某个元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-of-type()	选择指定的元素
:nth-last-of-type()	选择指定的元素，从元素的最后一个开始计算
:first-of-type	选择一个上级元素下的第一个同类子元素
:last-of-type	选择一个上级元素的最后一个同类子元素
:only-child	选择的元素是它的父元素的唯一一个了元素
:only-of-type	选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty	选择的元素里面没有任何内容

否定选择器

:not, 选择器匹配非指定元素/选择器的每个元素。

PS:IE6-8不支持

伪元素

::first-line	选择元素的第一行
::first-letter	选择文本块的第一个字母
::before	在元素前插入内容
::after	在元素后插入内容
::selection	用来改变浏览网页选中文的默认效果

PS:CSS3中用两个":"代表伪元素,若同时想兼容老的浏览器,最好还是使用一个":",但像CSS3的新伪元素(如::selection)还是要用来两冒号