css3实战 心得

Webkit类型浏览器（safari、chrom3）私有属性-webkit-;Gecko类型浏览器（firefox）私有属性—moz-;konqueror类型浏览器私有属性-khtml-;opera浏览器的私有属性-o-;ie的私有属性-ms-(目前只有ie8支持)。

1、新增选择器

^,$,*新增的属性选择器，^前缀；$后缀;*包含;兼容所有的浏览器（ie6除外）

使用方法：

结构伪类选择器

a、：root 在html文档中相当于html元素选择器

b、：nth-child(n)  n可以为数字也可以为odd,even，可以是公式，可以使1，但不是0   该选择器选取父元素的第 N 个子元素，与类型无关。

c、：nth-last-child(n) 倒数第n个

d、:nth-of-type(n)  选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

e、:nth-last-of-type(n)

f、:last-child

g、:first-of-type

h、:last-of-type

i、:only-child

j、:only-of-type

k、:empty

浏览器兼容情况：ie8及其以下浏览器不支持结构伪类，火狐3.5开始支持，opera,chrome,safari支持较为完善，opera9.0不支持。可以使用jquery的这些选择属性来代替。

 

ie9开始支持！

 

兄弟选择器E~F 只有ie6不支持

E:not(s)Ie9开始，opera9.6开始，firefox3.0开始支持

E:target  Ie9开始，opera9.6开始支持

 

 

2、透明

 

3、多栏布局

4、多背景图

5、文字阴影

6、开放字体类型

7、圆角

8、边框图片 （ie9不支持）

9、盒子阴影

10、媒体查询