繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS3教程:新增加的结构伪类
- CSS样式表
- css ID类和class类的长命名与短命名
- CSS background-position的使用说明详解
- 利用CSS定位背景图片 background-position
- CSS 多图片融合背景定位的应用于优缺点分析
- CSS实现的图片宽高自适应固定边框
- css 背景图片定位在菜单效果中的应用实例
- CSS 速记口诀 可以解决一些常见问题
- CSS 多浏览器兼容性问题及解决方案
- css 行级元素在多浏览器下的宽度问题 与解决方法
- IE下行框高度的问题
- CSS 实现的图片宽高自适应固定边框
- css的核心内容 标准流、盒子模型、浮动、定位等分析
- CSS 超出隐藏实现限制字数的功能代码(多浏览器)
- Div+CSS 布局入门教程之二 构建网站
- CSS 网页布局中文排版的9则技巧
- CSS网页布局25个实用小技巧
- 网页制作 默认Web字体样式
- IE与Firefox的CSS兼容大全 推荐
- css 非表格垂直对齐效果代码
- css cursor 的可选值（鼠标的各种样式）
CSS样式表 中的 CSS3教程:新增加的结构伪类
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 56 ::
收藏到网摘: n/a
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名不同显示的排行榜</h4>
<ol 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"> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> ……
</table>
其显示如图4-44所示。
图4-44 E:nth-child(n)的应用4
但是，需要特别注意的是，父元素内所有的子元素都参与排序，而无论元素的类型是什么，在上面的例子中，子元素的类型都是单一的（li或者td），而下面这个例子中，子元素的类型不再单一（包括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-45所示。
#sample5 dt {
font-weight:bolder;
}
#sample5 dt:nth-child(odd){
background:#6CF;
}
图4-45 E:nth-child(n)包括父元素内所有类型的子元素
由图4-45读者可以发现，判断dt是否为奇数的条件是其在子元素内总排序，而不是dt元素单独排序。
实例演示如下：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
评论 (0) All
