三个新的属性选择器被添加到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
匹配一个父节点下的最后一个子元素,等同于:nth-last-child(1) :checked
匹配选择的元素,比如复选框 :empty
匹配空元素(没有子元素)。 :not(s)
匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }
浏览器支持: 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)事实上不支持这些伪选择器。伪元素










