CSS选择器介绍
下表总结了CSS1和CSS2.1中出现的选择器。描述中英文是W3C CSS Selectors标准中的描述，是为了在中文没有解释清楚或有歧义的情况下进行进一步了解的参考。
CSS版本一栏介绍了此选择器第一次出现在那个CSS版本中。CSS是向下兼容的。
选择器类型 | 匹配语法 | 示例 | 描述 | CSS版本 |
通配选择器 Universal Selector | * | *{margin:0;} *.p{paddving:0;} | 选定文档目录树（DOM）中的所有类型的单一对象 any element | 2 |
类型选择器 Type Selectors | E | td { width:120px; } | 以文档语言对象类型作为选择符 an element of type E | 1 |
属性选择器 Attribute Selectors | E[attr] | p[title] { color: blue; } | 选择具有attr属性的E an E element with a "attr" attribute | 2 |
E[attr=value] | span[class=nav] { color: red; } | 选择具有attr属性且属性值等于value的E an E element whose "attr" attribute value is exactly equal to "value" | 2 | |
E[attr~=value] | div[speed="fast"][dorun="no"] { color: red; } | 选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E。这里的value不能包含空格 an E element whose "attr" attribute value is a list of space-separated values, one of which is exactly equal to "value" | 2 | |
E[attr|=value] | a[rel~="copyright"] { color:black; } | 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E E element whose "attr" attribute has a hyphen-separated list of values beginning (from the left) with "value" | 2 | |
包含选择器 Descendant Selectors | E F | ul li {font-size:14px; } | 选择所有被E包含的F。 an F element descendant of an E element | 1 |
子对象选择器 Child Selectors | E>F | div>p{color:#ccc;} | 选择所有作为E子对象的F。 an F element child of an E element | 1 |
ID选择器 ID Selectors | #myid | # myid { width:120px;} | 以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择符。 an E element with ID equal to "myid". | 1 |
类选择器 Class Selectors | E.class | .class{ font-size:14px;} | 在HTML中可以使用此种选择符。其效果等同于E[class~=className]。 an E element whose class is "class" (the document language specifies how class is determined). | 1 |
临近表兄弟选择器 Adjacent sibling combinator | E + F | div+p{font-size:18px;} | 选择紧接E的对象F an F element immediately preceded by an E element | 2 |
Structural pseudo-classes | E F:first-child | div p:first-child{font-size:9px;} | 设置对象E的第一个子对象F的样式表属性。 an E element, first child of its parent | 2 |
链接伪类 The link pseudo-classes | E:link E:visited | a:link {color: #ccc; } a:visited {color: #999; } | 设置a对象在未被访问前的样式表属性。 设置a对象在其链接地址已被访问过时的样式表属性。 默认值由浏览器决定。 对于无href属性（特性）的a对象，此伪类不发生作用。 an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) | 1 |
The user action pseudo-classes | E:active | a:active{font-size:9px;} a:hover{color: #ccc; } a:focus { font-size: 14px; } | 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。 设置对象在其鼠标悬停时的样式表属性。 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。 an E element during certain user actions | 1 and 2 |
The :lang() pseudo-class | E:lang(fr) | blockquote:lang(fr) { quotes: '?' ' ?' } //使用法语显示由quotes属性指定的法语的嵌套标记 | 设置对象使用特殊语言的内容样式表属性。 an element of type E in language "fr" (the document language specifies how language is determined) | 2 |
The ::first-line pseudo-element | E::first-line | div:first-line {font-size:16px; } | 设置对象内的第一行的样式表属性。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。 如果未强制指定对象的width属性， 首行的内容长度可能不是固定的。 the first formatted line of an E element | 1 |
The ::first-letter pseudo-element | E::first-letter | p a:first-letter { color: green } | 设置对象内的第一个字符的样式表属性。 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。 在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。 the first formatted letter of an E element | 1 |
The ::before pseudo-element | E::before | em:before { content: url("ding.wav") } | 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容 generated content before an E element | 2 |
The ::after pseudo-element | E::after | table:after { content: END OF TABLE } | 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。 generated content after an E element | 2 |
另：
选择器分组Grouping E，F，G 将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
P,div,span{color:#ddd;}
