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

时间:2021-05-08


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) { …… } tr:nth-child(2n 1) { …… } tr:nth-child(odd) { …… } tr:nth-child(2n) { …… } tr:nth-child(even) { …… } 注意:元素的第一个子元素索引为“1”。
利用这个伪类,可以很容易地实现双背景色甚至多背景色表格等效果。
例如有xhtml如下:
<ol id="sample1"> <li>列表项哦列表项</li> <li>列表项哦列表项</li> <li>列表项哦列表项</li> <li>列表项哦列表项</li></ol>
CSS如下:
#sample1 li:nth-child(even) { background:#FF9; }#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元素单独排序。
实例演示如下:
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>:nth-child :: css 3选择器</title><style 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></head><body><h1>css 3 选择器</h1><h2>结构伪类(Structural pseudo-classes)</h2><h3>E:nth-child(n)</h3><h4>双背景色</h4><ol id="sample1"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>三背景色</h4><ol id="sample2"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>前3名不同显示的排行榜</h4><ol id="sample3"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>表格的不同列背景色</h4><table border="0" cellspacing="0" cellpadding="0" id="sample4"><caption>表格的不同列背景色</caption><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr></table><h4>所有子元素</h4><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></body></html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章