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


Posted in HTML / CSS onApril 02, 2009

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”。
利用这个伪类,可以很容易地实现双背景色甚至多背景色表格等效果。
例如有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所示。
CSS3教程:新增加的结构伪类
图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所示。
CSS3教程:新增加的结构伪类
图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所示。
CSS3教程:新增加的结构伪类
图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所示。
CSS3教程:新增加的结构伪类
图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; }
CSS3教程:新增加的结构伪类
图4-45 E:nth-child(n)包括父元素内所有类型的子元素
由图4-45读者可以发现,判断dt是否为奇数的条件是其在子元素内总排序,而不是dt元素单独排序。
实例演示如下:

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

HTML / CSS 相关文章推荐
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 #HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 #HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 #HTML / CSS
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 #HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 #HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 #HTML / CSS
You might like
基于php伪静态的实现详细介绍
2013/04/28 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php组合排序简单实现方法
2016/10/15 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python控制Firefox方法总结
2019/06/03 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python可以用来做什么
2020/11/23 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
土地转让协议书范本
2014/04/15 职场文书
企业文化口号
2014/06/12 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
元旦主持词开场白
2015/05/29 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript