css选择器

三种基本选择器：
类型选择器：以文档语言对象类型作为选择符，匹配指定的元素。

p {color：red；}

类选择器：用点号（.）表示，根元素的class属性值来指定元素。

.note { font-size:14px; } /*所有class属性值等于"note"的对象字体尺寸为14px */ 

ID选择器：用井号（#）表示，根据元素的id属性（文档目录树DOM中作为对象的唯一标识符）值来匹配元素。

#note { font-size:14px; } /*所有id等于"note"的对象字体尺寸为14px */  

三种基本选择器的扩展
选择符分组：规则左边逗号分隔元素，右边规则定义的样式分号分隔。同时作用于多个元素。
                     ----大量压缩某种类型的样式分配，避免占用很长样式表。

h2，p{ color：red；background：white；}

子对象选择器：选取指定元素的直接后代。E1 > E2 { sRules } 选择所有作为 E1 子对象的 E2 。 (ie6不支持子对象选择符)

body > p { font-size:14px; } /* 所有作为body的子对象的p对象字体尺寸为14px */  

后代选择器：由两个或多个简单选择符通过空格分隔组成，匹配第一个简单选择符对应元素的所有后代元素'。注意：浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。(ie6不支持后代选择器)

div#divBox p span.red{color:red;}/*浏览器先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上*/
div ul>li p { font-size:14px; } 

属性选择器：根据属性名称或者属性值来匹配元素。css3中有如下几种匹配模式：
E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值，常用来匹配语言。
(ie6不支持属性选择器)

.a[id] {background: blue;}/*匹配所有带有id属性的a元素*/
.a[href][title] {background: yellow;}/*匹配同时具有href,title两个属性的a元素*/
.a[href="http://wangjingyi.iteye.com"][title] {background: yellow;}/*属性值是词列表的形式时,属性和属性值必须完全匹配才被选中*/
.a[title~="website"]{color:green;}/*匹配title属性中属性值含有website的a元素*/
.a[href$="png"]{background:green;}/*匹配有href属性并以png值结尾的a元素*/
.a[href^="http://"]{color:red;}/*匹配以http://开头的属性值的所有a元素*/
.a[title*="site"]{color:white;}/*匹配title属性值包含子串"site"的所有a元素*/
.a[lang|="zh"]{background:gray;}/*匹配lang属性值等于zh或以zh-开头的所有元素*/

相邻兄弟选择器：用加号（+）表示，选择紧接在另一个元素后的元素，而且二者有相同的父元素。(ie6不支持相邻兄弟选择器)


伪类选择器：a:hover必须被置于a:link和a:visited之后才是有效的，a:active必须被置于a:hover之后，才是有效的。伪类名称对大小写不敏感。

/*锚点伪类：*/
.a:link {color:gray;}/*链接没有被访问时前景色为红色*/ 
.a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ 
/*用户行为伪类：*/
.a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ 
.a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/ 
.form-submit:focus { border: 1px solid #4D90FE !important; }
/*向拥有键盘输入焦点的元素添加样式,经常用在表单元素上*/

css选择器的优先级判断详见：http://wangjingyi.iteye.com/blog/1447077
css选择器和浏览器的兼容请见：http://wangjingyi.iteye.com/blog/1447072

扩展：http://code.google.com/p/adblock-chinalist/wiki/CSS_selectors
http://www.w3school.com.cn/css/css_selector_type.asp
http://yiminghe.iteye.com/blog/254094