伪类
或许在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 , nly-child , :root , :empty , :target , :checked , :enabled 和:disabled ,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection .它可以让你指定被用户高亮(选中)的元素。
浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读
出处:蓝色理想
责任编辑:bluehearts
上一页 用CSS3将你的设计带入下个高度 [2] 下一页 用CSS3将你的设计带入下个高度 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|