CSS 3提升了很多的构造伪类，运用文本文档构造树来完成主要表现，从而能够降低网页页面内class特性和ID特性的界定，使得文本文档更为简约。
有关阅读文章文章内容：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个子元素数据库索引为“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⑷1所示。
图4⑷1 E:nth-child(n)的运用1
还可以完成3色乃至多色的情况。比如以下编码：
#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⑷2所示。
图4⑷2 E:nth-child(n)的运用2
此时需留意的是，3n 1表明的是3行循环系统内的第1行，而3n则是第3行。
另外，还可以特定某1个特殊的子元素，比如以下编码：
#sample3 li:nth-child(1) {
color:#F00;
}
#sample3 li:nth-child(2) {
color:#F60;
}
#sample3 li:nth-child(3) {
color:#FC0;
}
<h4>前3名不一样显示信息的排行榜</h4>
<ol id="sample3">
<li>目录项哦目录项</li>
<li>目录项哦目录项</li>
<li>目录项哦目录项</li>
……
</ol>
各自特定了第1、2、3个li的市场前景色调color，其显示信息如图4⑷3所示。
图4⑷3 E:nth-child(n)的运用3
还可以为同1列的模块格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">
<tr>
<td>1⑴</td>
<td>1⑵</td>
<td>1⑶</td>
</tr>
……
</table>
其显示信息如图4⑷4所示。
图4⑷4 E:nth-child(n)的运用4
可是，必须非常留意的是，父元素内全部的子元素都参加排列，而不管元素的种类是甚么，在上面的事例中，子元素的种类全是单1的（li或td），而下面这个事例中，子元素的种类已不单1（包含dt和dd）：
<dl id="sample5">
<dt>dt 1，总排行1</dt>
<dd>dd 1，总排行2</dd>
<dt>dt 2，总排行3</dt>
<dd>dd 2，总排行4</dd>
<dd>dd 3，总排行5</dd>
<dt>dt 3，总排行6</dt>
<dt>dt 4，总排行7</dt>
<dd>dd 4，总排行8</dd>
</dl>
假如设置以下的CSS，那末其显示信息的实际效果则如图4⑷5所示。
#sample5 dt {
font-weight:bolder;
}
#sample5 dt:nth-child(odd){
background:#6CF;
}
图4⑷5 E:nth-child(n)包含父元素内全部种类的子元素
由图4⑷5读者能够发现，分辨dt是不是为单数的标准是其在子元素内总排列，而并不是dt元素独立排列。
案例演试以下：
[Ctrl A 所有挑选 提醒：你可先改动一部分编码，再按运作]
