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 相关文章推荐
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php提交post数组参数实例分析
2015/12/17 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python实现将内容分行输出
2015/11/05 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
中科软测试工程师面试题
2012/06/16 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
工地门卫岗位职责范本
2014/07/01 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
MySQL数据库查询之多表查询总结
2022/08/05 MySQL