第二章 选择器

第二章 选择器

1.元素选择器 p{color: blue;}
html必须为合法标签 否则无效
xml根据文档使用

2.群组选择器 h1,p{color:blue;}
全局选择器（＊）

3.类选择器 .warning{color:blue;}
注意：使用多类选择器时，如p.waring.help 在IE<7中只相当于p.help，即最后一个类有效。

4.ID选择器 #p{color:blue;}
a. ID选择器和类选择器都是case-sensitive
b. 所有形式文档（html, svg, Mathml和xml)中都可使用，而类选择器在xml中不能保证？

5.属性选择器
IE<6/win和IE<5/mac中属性选择器无效，IE>7支持CSS2.1属性选择器，以及部分CSS3属性选择器。

a.简单属性选择器 p[class][id]{color:blue;}
不管属性值，只要元素有该属性就可选中。

b.根据属性准确值 a[href="http://www.baidu.com"]{color:blue;}
注意：与ID和类选择器存在权重区别。

c.根据属性部分值
~ 包含某个单词 p[class~="bar"]{color:blue;}
^ 以某个字段开始 p[class^="bar"][color:blue;]
$ 以某个字段结束 p[class$="bar"][color:blue;]
| 为该单词，或以该单词加“-”开始 img[scr|="figure"]

6.按文档结构
IE<7 不支持子选择器和兄弟选择器

a.后代选择器 p em{color:blue;}
不管层次多深

b.子选择器 p>em{color:blue;}
第一代子元素

c.兄弟选择器 h1+p{color:blue;}
父元素相同且紧邻
注意：即使两个兄弟元素中有文本内容（非元素标签），也能选中
li+li会选择除第一个li以外的所有li元素

7.伪类
当使用复合伪类，如a:link:hover时 顺序不重要
IE<7不支持复合伪类，仅取最后一个伪类

a.伪类选择器（静态）a:link{color:blue;} a:visited{color:yellow;}
针对有href属性的a元素
如果使用a{color:blue;}而非a:link{color:blue;}，那么所有a元素都会是blue，而忽视状态

b.动态伪类 :focus :hover :active
不仅限于a元素

c.子元素伪类 p:first-child{color:blue;}
IE<7 不支持

d.语言伪类 *:lang(fr){color:blue;}
较使用属性选择器选择lang属性，此方法获取属性的方式更多，如meta, http header 及xml:lang等？

8.伪元素
a.第一个单词 p:first-letter{font-size: 200%;}

b.第一行 p:first-line{color:blue;}
注意：1.CSS2中，:first-letter和first-line都只适用于块级元素，如p,h1。
CSS2.1中，first-letter适用于所有元素，first-line?
2. :first-line和:first-letter在属性使用上有一定的限制，只可以使用:
都可用：font color background text-decoration vertical-align text-transform line-height
    letter-spacing word-spacing  
first-letter还可使用：padding margin border float

c.前后伪元素 p:before(after){content:"@"; color:blue;}
在元素前或后插入内容，并直接操作其样式