CSS3教程:新增加的结构伪类

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

相关阅读文章：CSS3属性选择符介绍

4.7.3 结构伪类（Structural pseudo-classes）

CSS 3增加了大量的结构伪类，利用文档结构树来实现表现，从而可以减少页面内class属性和ID属性的定义，使得文档更加简洁。

以下示例，请使用Win XP的Google Chrome或者MAC OS X的Safari 3.1查看。

1. E:root

匹配文档的根元素。在(X)HTML中，根元素就是<html>元素。例如：

:root { border: 1px solid blue; }

在(X)HTML文档中，其效果等同于：

html { border: 1px solid blue; }

2. E:nth-child(n)

匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式，例如：

tr:nth-child(3) { …… }     /* 匹配所有表格里面排第3的行<tr> */
tr:nth-child(2n+1) { …… }  /* 2n+1，公式，匹配所有奇数行 */
tr:nth-child(odd) { …… }   /* odd：关键字，匹配所有奇数行 */
tr:nth-child(2n) { …… }    /* 2n：匹配所有偶数行*/
tr:nth-child(even) { …… }  /* even：关键字，匹配所有偶数行li */

注意：元素的第一个子元素索引为“1”。

利用这个伪类，可以很容易地实现双背景色甚至多背景色表格等效果。
例如有xhtml如下：

<ol id="sample1">
  <li>列表项哦列表项</li>
  <li>列表项哦列表项</li>
  <li>列表项哦列表项</li>
  <li>列表项哦列表项</li>
</ol>

CSS如下：

#sample1 li:nth-child(even) {  /* #sample1的子元素中排序为奇数的li */
background:#FF9;  /* 也可以设定float、margin、border等属性 */
}
#sample1 li:nth-child(odd) {
background:#FC3;
}

其显示如图4-41所示。
CSS3教程:新增加的结构伪类
图4-41 E:nth-child(n)的应用1

也可以实现三色甚至多色的背景。例如下列代码：

#sample2 li:nth-child(3n+1) {
background:#F90;
}
#sample2 li:nth-child(3n+2) {
background:#Fc3;
}
#sample2 li:nth-child(3n) {
background:#FF9;
}
<ol id="sample2">
  <li>列表项哦列表项</li>
  <li>列表项哦列表项</li>
  ……
</ol>

其显示如图4-42所示。
CSS3教程:新增加的结构伪类
图4-42 E:nth-child(n)的应用2

此时需注意的是，3n+1表示的是3行循环内的第1行，而3n则是第3行。

同时，也可以指定某一个特定的子元素，例如下列代码：

#sample3 li:nth-child(1) {
co

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

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 实例方式学CSS text-align怎么用下一篇: 认识浏览器：Internet Explorer

关于CSS3教程:新增加的结构伪类的所有评论

随机推荐