级联样式表在13年前被引入，而且被广泛使用的CSS 2.1标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上，我们也无法想象。

　　为什么会这样呢，当提到CSS的时候，过去我们是如此的不情愿和害怕尝试？为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式？为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级？

　　是时候在我们的项目中引入CSS3 特性了，不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做，特别是在它能够让网站更加灵活并减少开发和维护成本的时候。

　　使用浏览器专有属性

　　为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。而且不幸的是，一些属性甚至到最后都可能不被W3C推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。

　　当然，这种方法的劣势是，将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟，我们不想在我们的样式表中重拾私有浏览器hack的需求。InterNETExplorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用，并在20世纪九十年代成为一个传奇；它们依然让现存的很多网站（在其他浏览器中）表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地，对吧？

　　然而，网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

　　最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)，它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror(-khtml-)、Opera (-o-) 以及InterNET Explorer(-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

　　作为专业的设计师，我们不得不注意：使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下，比如试验或学习，我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

　　1. 选择器

　　CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、 ID或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

　　属性选择器

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

　　◆de>[att^="value"]de>

匹配包含以特定的值开头的属性的元素

　　◆de>[att$="value"]de>

匹配包含以特定的值结尾的属性的元素

　　◆de>[att*="value"]de>

匹配包含含有特定的值的属性的元素

　　值的属性的元素

　　tweetCC使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:

   1. a[title$="tweetCC"] {  
   2. position: absolute;  
   3. top: 0;  
   4. right: 0;  
   5. display: block;  
   6. width: 140px;  
   7. height: 140px;  
   8. text-indent: -9999px;  
   9. }         

        

        
        
      
        
it知识库：用CSS 3将你的设计水平带入下个高度，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。