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

【 tulaoshi.com - Web开发 】

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

4.7.3 结构伪类（Structural pseudo-classes）

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

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 */

利用这个伪类，可以很容易地实现双背景色甚至多背景色表格等效果。
例如有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所示。

图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所示。

图4-42 E:nth-child(n)的应用2

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

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

#sample3 li:nth-child(1) {color:#F00;}#sample3 li:nth-child(2) {color:#F60;}#sample3 li:nth-child(3) {color:#FC0;}h4前3名不同显示的排行榜/h4ol id="sample3"  li列表项哦列表项/li  li列表项哦列表项/li  li列表项哦列表项/li  /ol

分别指定了第1、2、3个li的前景颜色color，其显示如图4-43所示。

图4-43 E:nth-child(n)的应用3

也可以为同一列的单元格td指定相同的背景色：

#sample4 td:nth-child(3n+1) {background:#FCC;}#sample4 td:nth-child(3n+2) {background:#F99;}#sample4 td:nth-child(3n+3) {background:#C6F;}table border="0" cellspacing="0" cellpadding="0" id="sample4"  trtd1-1/tdtd1-2/tdtd1-3/td  /tr  /table

其显示如图4-44所示。

图4-44 E:nth-child(n)的应用4

但是，需要特别注意的是，父元素内所有的子元素都参与排序，而无论元素的类型是什么，在上面的例子中，子元素的类型都是单一的（li或者td），而下面这个例子中，子元素的类型不再单一（包括dt和dd）：

dl id="sample5"  dtdt 1，总排行1/dt  dddd 1，总排行2/dd  dtdt 2，总排行3/dt  dddd 2，总排行4/dd  dddd 3，总排行5/dd  dtdt 3，总排行6/dt  dtdt 4，总排行7/dt  dddd 4，总排行8/dd/dl

如果设定如下的CSS，那么其显示的效果则如图4-45所示。

#sample5 dt {font-weight:bolder;}#sample5 dt:nth-child(odd){background:#6CF;}

图4-45 E:nth-child(n)包括父元素内所有类型的子元素

由图4-45读者可以发现，判断dt是否为奇数的条件是其在子元素内总排序，而不是dt元素单独排序。

实例演示如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title:nth-child :: css 3选择器/titlestyle type="text/css"body {font: small/2 "宋体", serif;background:#fff;color:#000;}h1,h2,h3 {font-size: larger;}h4 {background:#eee;}#sample1 li:nth-child(even) {background:#FF9;}#sample1 li:nth-child(odd) {background:#FC3;}#sample2 li:nth-child(3n+1) {background:#F90;}#sample2 li:nth-child(3n+2) {background:#Fc3;}#sample2 li:nth-child(3n) {background:#FF9;}#sample3 li:nth-child(1) {color:#F00;}#sample3 li:nth-child(2) {color:#F60;}#sample3 li:nth-child(3) {color:#FC0;}#sample4 {width:300px;}#sample4 td:nth-child(3n+1) {background:#FCC;}#sample4 td:nth-child(3n+2) {background:#F99;}#sample4 td:nth-child(3n+3) {background:#C6F;}#sample5 dt {font-weight:bolder;}#sample5 dt:nth-child(odd){background:#6CF;}/style/headbodyh1css 3 选择器/h1h2结构伪类(Structural pseudo-classes)/h2h3E:nth-child(n)/h3h4双背景色/h4ol id="sample1"li列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/li/olh4三背景色/h4ol id="sample2"li列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/li/olh4前3名不同显示的排行榜/h4ol id="sample3"li列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/lili列表项哦列表项/li/olh4表格的不同列背景色/h4table border="0" cellspacing="0" cellpadding="0" id="sample4"caption表格的不同列背景色/captiontrtd1-1/tdtd1-2/tdtd1-3/td/trtrtd2-1/tdtd2-2/tdtd2-3/td/trtrtd3-1/tdtd3-2/tdtd3-3/td/trtrtd4-1/tdtd4-2/tdtd4-3/td/tr/tableh4所有子元素/h4dl id="sample5"dtdt 1,总排行1/dtdddd 1,总排行2/dddtdt 2,总排行3/dtdddd 2,总排行4/dddddd 3,总排行5/dddtdt 3,总排行6/dtdtdt 4,总排行7/dtdddd 4,总排行8/dd/dl/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]