CSS3的新特性

尽管CSS3的诸多新特性还不被很多浏览器支持，或者说支持的不好。简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。

一、 选择器

1.属性选择器

三个新的属性选择器被添加到CSS3：

[att^="value"]
匹配包含以特定的值开头的属性的元素

[att$="value"]
匹配包含以特定的值结尾的属性的元素

[att*="value"]
匹配包含含有特定的值的属性的元素

例如a[title$="tweetCC"] {}

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的

2.连字符

CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。

例如：给某个特定的div的同级的图片添加一个灰色的边框，定义样式如下：

div~img {border: 1px solid #ccc;} 

浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了IE6！

3.伪类

:last-child
匹配一个父节点下的最后一个子元素。

:checked
匹配选择的元素，比如复选框

:empty
匹配空元素（没有子元素）。

:not(s)
匹配所有不符合指定声明(s)的元素。

比如，所有没有使用”lead”类的段落的显示为黑色： p:not([class*="lead"]) { color: black; }

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

4.伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

还有很多其他的效果，比如使用border-radius在FF下可以实现圆角，但IE不行。类似的就不写了。

 

 

------整理来源与蓝色理想