CSS3教程:新增加的结构伪类
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-03
| lor:#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所示。 也可以为同一列的单元格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所示。 但是，需要特别注意的是，父元素内所有的子元素都参与排序，而无论元素的类型是什么，在上面的例子中，子元素的类型都是单一的（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读者可以发现，判断dt是否为奇数的条件是其在子元素内总排序，而不是dt元素单独排序。 实例演示如下：
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于CSS3教程:新增加的结构伪类的所有评论
