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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
CSS极坐标的实例代码
Jun 03 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
构建简单的Webmail系统
2006/10/09 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php实现微信发红包功能
2018/07/13 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python最基本的输入输出详解
2015/04/25 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
详解Python if-elif-else知识点
2018/06/11 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python中turtle库的使用实例
2019/09/09 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python excel多行合并的方法
2020/12/09 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
迪奥美国官网:Dior美国
2019/12/07 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
大学生职业生涯规划书
2014/03/14 职场文书
社区党务公开实施方案
2014/03/18 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL