用CSS3将你的设计带入下个高度

属性选择器

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

• [att^="value"]
  匹配包含以特定的值开头的属性的元素
• [att$="value"]
  匹配包含以特定的值结尾的属性的元素
• [att*="value"]
  匹配包含含有特定的值的属性的元素

值的属性的元素

a[title$="tweetCC"] {  
    position: absolute;  
    top: 0;  
    right: 0;  
    display: block;  
    width: 140px;  
    height: 140px;  
    text-indent: -9999px;  
    }

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

连字符

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

比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：

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

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

伪类

或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：

• :nth-child(n)
  让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用： :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
• :nth-last-child(n)
  与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器： div p:nth-last-child(-n+2)
• :last-child
  匹配一个父节点

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!