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

互联网 发布时间：2009-04-02 19:37:19 作者：佚名

网页制作Webjx文章简介：CSS 3增加了大量的结构伪类，利用文档结构树来实现表现，从而可以减少页面内class属性和ID属性的定义，使得文档更加简洁。相关阅读文章：CSS3属性选择符介绍 4.7.3 结构伪类（Structural pseudo-cl

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所示。

图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所示。

图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所示。

图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所示。

图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; }

图4-45 E:nth-child(n)包括父元素内所有类型的子元素
由图4-45读者可以发现，判断dt是否为奇数的条件是其在子元素内总排序，而不是dt元素单独排序。
实例演示如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>:nth-child :: css 3选择器</title>

<style type="text/css">

body {

font: small/2 "宋体", serif;

background:#fff;

color:#000;

}

h1,h2,h3 {

font-size: larger;

}

h4 {

background:#eee;

}

#sample1 li:nth-child(even) {

background:#FF9;

}

#sample1 li:nth-child(odd) {

background:#FC3;

}

#sample2 li:nth-child(3n 1) {

background:#F90;

}

#sample2 li:nth-child(3n 2) {

background:#Fc3;

}

#sample2 li:nth-child(3n) {

background:#FF9;

}

#sample3 li:nth-child(1) {

color:#F00;

}

#sample3 li:nth-child(2) {

color:#F60;

}

#sample3 li:nth-child(3) {

color:#FC0;

}

#sample4 {

width:300px;

}

#sample4 td:nth-child(3n 1) {

background:#FCC;

}

#sample4 td:nth-child(3n 2) {

background:#F99;

}

#sample4 td:nth-child(3n 3) {

background:#C6F;

}

#sample5 dt {

font-weight:bolder;

}

#sample5 dt:nth-child(odd){

background:#6CF;

}

</style>

</head>

<body>

<h1>css 3 选择器</h1>

<h2>结构伪类(Structural pseudo-classes)</h2>

<h3>E:nth-child(n)</h3>

<h4>双背景色</h4>

<ol id="sample1">

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

</ol>

<h4>三背景色</h4>

<ol id="sample2">

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

</ol>

<h4>前3名不同显示的排行榜</h4>

<ol id="sample3">

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

<li>列表项哦列表项</li>

</ol>

<h4>表格的不同列背景色</h4>

<table border="0" cellspacing="0" cellpadding="0" id="sample4">

<caption>

表格的不同列背景色

</caption>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

<tr>

<td>3-1</td>

<td>3-2</td>

<td>3-3</td>

</tr>

<tr>

<td>4-1</td>

<td>4-2</td>

<td>4-3</td>

</tr>

</table>

<h4>所有子元素</h4>

<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>

</body>

</html>

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

使用CSS3的appearance属性改变元素的外观的方法
大家都知道每个浏览器对HTML元素渲染都不一样，比如说button，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路，利用浏览器的对元素的默认渲染
2015-12-12
基于jquery+css3实现的元素颤抖特效源码
jquery+css3实现元素颤抖特效是一款基于css3实现的抖动效果，各种鬼畜般的抖动
2015-01-14
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type="submit"]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type="text"]文本输
2014-10-11
css3 伪元素和伪类选择器详解
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准
2014-09-04
css3设置box-pack和box-align让div里面的元素垂直居中
只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下
2014-09-01
利用CSS3的定位页面元素
让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。
2009-08-29
CSS3中的5个有趣的新技术
网页制作Webjx文章简介：网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小. CSS是众所周知且应用
2009-04-02
css3实现多个元素依次显示效果
在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下
2017-12-12

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容