toc

Intro

首先是css1和css2中定义的选择器。

css1中定义的选择器：

• 类型选择器：E
• 类选择器:E#id
• ID选择器:  E,classname
• 包含选择器: E:F
• 链接伪类选择器：E:link E:visited E:active E:hover E:focus
• 伪元素选择器：E:first-line E:first-letter

css2中定义的选择器有：

• 通配选择器：*
• 属性选择器：①E[attr]（选择匹配E的元素，且该元素定义了attr属性）②E[attr=”name”](选择匹配E的元素，且元素attr属性值为name）③E[attr~=”name”](选择匹配E的元素，且元素attr属性的值为以空格分割的列表，列表有name值）④E[attr|=”name”]（选择匹配E的元素，且元素attr属性的值为用连字符（-）链接，开头为name的值）
• 结构伪类选择器：E:first-child
• :lang()伪类选择器：E:lang(fr)选择匹配E的元素，且改元素显示内容的语言类型为fr
• 为元素选择器：E:before E:after
• 子包含选择器：E>F
• 相邻兄弟选择器：E+F

————————–一下为css3新增的选择器———————

1新增的属性选择器,css3选用了更加惯用的^、$、*匹配运算符，^标识匹配起始符，$表示匹配终止符，*表示匹配任意字符

• E[attr^=”name”] 作用和E[attr|=”name”]一样
• E[attr$=”name”] 选择匹配E的元素，且该元素attr属性值的后缀为name。
• E[attr*=”name”]作用和E[attr~=”name”]一样。

css3中尚且保留了E[attr~=”name”]和E[attr|=”name”]的支持。

2.结构伪类选择器，结构伪类（Structural pseudo-classes）是利用html文档结构树（DOM）实现元素的过滤。

• E:root 选择匹配Ｅ所在文档的跟元素
• E:nth-child(n) 选择父元素中的第n个位置的匹配E的子元素，注：n支持数字、关键字（odd、even）前者为奇数，后者为偶数、公式譬如2n 2n+1。
• E:nth-last-child(n) 选择父元素的倒数第n个位置的匹配E的子元素。
• E:nth-of-type(n) 选择父元素的子元素中匹配E的子元素中第n个的元素，即父元素中匹配E的子元素单独排序，非E的元素不参与排序，n支持数字、关键字、公式。
• E:nth-last-of-type(n)
• E:last-child
• E:first-of-type 功能等于E:nth-of-type(1)
• E:last-of-type
• E:only-child 选择父元素只包含一个子元素，且子元素匹配E。
• E:only-of-type 选择父元素中只包含一个同类子元素，且该子元素匹配E。
• E:empty 选择匹配E的元素，其改元素不包含子节点。注：文本也属于节点。

3.UI元素状态伪类选择器

• E:enable  指定当元素处于可用状态时的样式；
• E:disable 指定当元素处于不可用状态时的样式；
• E:read-only  指定当元素处于只读状态时的样式；
• E:read-write 指定当元素处于非只读状态时的样式；
•             注：在FF下要写成 -moz-read-only 或者 -moz-read-write
•             例：
•                   input[type=”text”]:read-only{…}
•                   input[type=”text”]:read-write{…}
•                   input[type=”text”]:-moz-read-only{…}    //针对FF而写
•                   input[type=”text”]:-moz-read-write{…}   //针对FF而写
•                  
• E:checked  指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)；
• E:default  指定当页面打开时默认处于选区状态的radio或checkbox控件的样式；
• E:indeterminate  指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消
• E::selection  指定当元素处于选中状态时的样式；

4.其他选择器

• E~F 通用元素选择器，选择匹配F的所有元素，注 在DOM结构中E和F应该处于同一级别，且F跟随在E后面。
• E:not(s) 否定伪类选择器，选择匹配E的元素，且过滤匹配s选择符的任意元素，注，s只能为一个简单的选择器，不能使用复合选择器。
• E:target 目标伪类选择器，选择匹配E的所有元素，且匹配元素被相关url指向。

——————–

浏览器对css选择器的支持可以到这里查看,也可以在haz.io查看你所用的浏览器的支持情况。

ie9对选择器的支持看下图