Designsor

未来的CSS文件中很可能更多的会涌现出下面这张图的样子了。

上图是我写的个实例，综合应用了CSS3中的选择器和选择符，比如所有元素的:hover，attr选择器，子元素筛选，所有的事件伪类，>层级，还有锚点选择器:target，奇偶选择器等。

下面是应用后的样式在各个浏览器中的样子。

IE系列从5.5一直支持到9.其他非IE系列均为目前市场最新版本。经测试，显示均一致。

例子地址：http://www.designsor.com/demo/css3/

给出几条HTML部分代码如下：

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<!–[if lt IE 9]><script src=”ie7/IE9.js”></script><![endif]–>

保障IE8的模式为正常兼容模式，保障IE9以下浏览器加载CSS3的选择器属性js脚本，保障非IE浏览器不加载IE9.JS脚本文件。如下图在FF里，我们并没有看到IE9.JS的加载。

特别注意的是，看了上面的demo例子，我们并没有使用任何额外的js就实现了一些以前IE中必须要用js或者其他库框架才能完成的一些特殊工作，看来css3给我们开发者带来了太多的便利。

IE9.js支持的CSS3特性如此列表

http://ie7-js.googlecode.com/svn/test/index.html

请仔细查看，并可大胆的先提前应用到你的项目里吧：

如果你要实现CSS3的高级特性，比如圆角，阴影，当然也可以。但是在IE下也是必须要付出额外代价，在IE9出现之前不推荐。但是针对圆角这么实用的功能性CSS，解决办法也很多，比如CSS8中的这篇文章：http://www.css88.com/archives/2230 （实现CSS3圆角）还有这篇文章http://www.css88.com/archives/2240 （实现CSS3阴影）

具体代码不给出，我测试都通过，但是在项目中额外提醒下关于.htc的兼容性与路径问题，需要各位在应用时提前考研，路径需要注意，与CSS文件最好同级，因为htc不支持相对路径。并且所有的HTC,JS文件模拟CSS3的这种圆角特效，无论谁写的，其实质都是在元素中增加了DOM，模拟实现的，所以在应用了htc或者js圆角的元素下再使用伪类，IE9以下是不被支持的。

如果说CSS3的特效是你梦寐以求的，那么错了。他的特效还没到实际应用阶段，所以我觉得在项目中保持CSS2的一些高级用法还是有益的，比如圆角的实现，比如九宫格，背景图片定位技术等。而在选择器的应用上，大胆的使用css3的选择器吧。目前大家都支持的很好了。尤其是在ie7项目组的ie9.js推出后，他连:not选择符都已经支持了……还犹豫啥呢。IE6未来是必死的。

请用各种浏览器或者FF来查看我的DOMO例子中的CSS文件的写法，我觉得你会很感兴趣并且加入到使用CSS3的行列中。

相关其他知识关键字：Ie-css3.js,ie7,ie8,ie9.js,各种辅助IE下实现封装方法的htc方法。

如果你对未来的实用CSS3感兴趣，也可以查看下这篇文章(http://www.javaeye.com/topic/344986)，或者与我交流，用了差不多1天半的时间掌握了下大部分的CSS3实用方法，相比较CSS2来说，它让CSS的写法更有具有挑战性和趣味性了，使用起来更加效率和稳健，作为前端开发者，你要跟上脚步了。（有关效率问题的那套歪理邪说，均可取个人主观判断后做再决定）