网络编程
位置：首页>> 网络编程>> 网页设计>> 提升你设计水平的CSS3新技术[译]（2）

提升你设计水平的CSS3新技术[译]（2）

作者：暴风彬彬　来源：彬go　发布时间：2009-08-02 20:51:00　

标签：设计,浏览器,CSS3,新技术

连字符

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, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

扩展阅读

第一页 上一页 1
2
3 4 5 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com