1. 选择器

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

属性选择器

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

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

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

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！

出处：蓝色理想
责任编辑：bluehearts

上一页 用CSS3将你的设计带入下个高度 [1] 下一页 用CSS3将你的设计带入下个高度 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。