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使用多列制作瀑布流
May 10 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 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 破解防盗链图片函数
2008/12/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
xml和web特殊字符
2009/04/28 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
自荐信封面
2013/12/04 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书