单纯使用float:left或者float:right，而不添加额外的class区分元素的位置，似乎是无法实现靠左/右的效果。

首先列出结构：

<div class="justify">
  <ul>
    <li>靠左边</li>
    <li>中间</li>
    <li>靠右边</li>
    <li>靠左边</li>
    <li>中间</li>
    <li>靠右边</li>
    <li>靠左边</li>
    <li>中间</li>
    <li>靠右边</li>
  </ul>
</div>

思路是：li不需要单独的class来设定左右，而是通过扩大ul的宽度和高度，使其溢出父层，再通过父层的overflow:hidden来隐藏多出容器的部分。

CSS

.justify {
width:320px; /* 1列3个li，li之间距离10px = 100px*3 + 10px*2 */
overflow:hidden;
margin:10px;
border:1px solid #999999;
}
.justify ul {
width:330px; /* 可容纳下3列的宽度 */
margin-bottom:-10px;/* 隐藏掉最下面一行的margin-bottom */
overflow:hidden;
zoom:1;/* 触发IE的Layout */
}
*+html .justify ul {margin-bottom:0;}/* 针对IE7中最后1行li的margin-bottom失效 */
.justify li {
display:inline;float:left;list-style:none;
width:100px;height:100px;margin:5px;
background:#EEEEEE;}

其实，用图2来解释更直观一些：

提示：IE7内最后一行li的margin-bottom应该会被IE吃掉，所以ul就不需要margin-bottom了。

此处需注意的是调整div的宽度的同时也要调整ul的宽度。

或者不设定ul的宽度而是用负marign值来达到扩大ul宽度的效果。

非浮动和定位的块级元素，其width值为auto（默认值）时，会尽量充满父元素的内容框，也就是说当没有border/padding/margin时，width是100%。
计算公式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-rigth=包含块的宽度（div的width）
因此如果设定ul的margin-right为-10px，其他padding/margin/border都为0，则：
ul的width=320px（div的width）-(-10px)=330px
代码如下：

.justify {......}
.justify ul {
margin:0 -10px -10px 0;
overflow:hidden;
zoom:1;/* 触发IE的Layout */
}
.justify li {......}

这样的优点在于，只要调整最外层div的宽度，就可以实现2列或者4列的效果。

——查看示例文件——

从开始到结束，宛若梦幻。

这句话不是我说的，而是当2002年tom文学频道被解散的时候，乌鸦同学写给文学频道的朋友们的结束语。（不过那篇文，最后没能正式发出来。）
那是互联网的冬天，很多站死去了。
现在，4CSS这个小小的站，由于cn域名的问题，有可能也要面对结束的命运。

虽然，没有投入过太多精力，当初建立的目的，也是为了给《别具光芒》的读者们一个可以看资料的地方，但是想到现实中的种种，心中还是有些些的愤怒。
其实我也可以另注册一个域名，反正这个域名也没有太多的价值。但是虽然说：“哀莫大于心死”有些过，可是对于目前环境的无奈与悲哀，让我也没有什么气力再折腾了，各安天命吧。
现在的服务器，是几个朋友一起掏钱托管的，如果因为这次整顿的原因，再没有人参加，可能连服务器也要没有了。
那时候，可能连【猫窝】也要没了。
从98年到现在，我坚持了这么多年，到最后，却只能是无奈地看着她在风雨中飘零，这份哀伤，却不知道那些做决定的大老爷们有过没有。

甘地说：“毁灭人类的七种事是：没有原则的政治，没有牺牲的崇拜，没有人性的科学，没有道德的商业，没有是非的知识，没有良知的快乐，没有劳动的富裕。”

冬天又来了，而春天真的还很远。

https://addons.mozilla.org/zh-CN/firefox/collection/tools4webdeveloper/

《写给大家看的设计书》是一本普及性的设计入门书籍，它非常适合非设计专业的人员来阅读，书中没有晦涩难懂的术语，读起来很舒畅，所举的例子也很简单明了，能够非常贴切地说明了问题。

有些东西，对于我这样自学的人来说，虽然也知道应用，可是总是一个经验使然，而对原理不甚了解。看过此书，算是对自己这许多年摸索的一个总结。

这本书不是为网页设计而做，而是针对平面设计，但是设计理念是相通的，基本知识是不会过时的。

在此我摘录出书中的要点，作为笔记，如果条件允许，还是买一本来看，书里的插图很值得一看。价钱也不算贵，原价39，人邮翻译出版。

以下是对基本设计原则的概述，每一个优秀的设计中都应用了这些设计原则，它们是互相关联的，只应用某一个原则的情况很少。

对比（Contrast）

在页面上增加对比能吸引人的眼球。

对比的基本思想是——要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

要增加有意思的对比，最容易的方法就是实现字体对比，不过不要忘记，还可以利用线、颜色、元素之间的间隔、材质等形成对比。

对比的根本目的有两方面，这两方面相辅相成，无法分开。

一个目的是增强页面的效果，另一个目的是有助于信息的组织。

对比元素不能让读者很混淆，也不能错误地强调重点（即本不该是重点的元素）。

重复（Repetition）

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。例如，所有标题都设置为相同的大小和粗细。

重复的目的就是统一，并增强视觉效果。

重复有助于组织信息。这可以帮助读者浏览各个页面：它有利于将设计中单独的部分统一起来。即使在一个只有一页的文档中，重复元素也可以建立一种连续性，将文档“整个捆在一起”。

有时重复的项并不一定完全相同，而只是存在明确关联的紧密相关的对象。

重复还会为你的作品带来一种专业性和权威性。它会使读者感觉有人在负责，因为重复显然是一种经过深思熟虑的设计决策。

要避免太多地重复一个元素，重复太多会让人讨厌。要注意对比的价值。

对齐（Alignment）

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

如果页面上的一些项是对齐的，这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的，但在你眼里（以及在你的心里），它们之间也会有一条看不见的线把它们连在一起。

在页面上放其他项时，一定要确保每一项都与页面上的其他项存在某种对齐。如果文本行水平摆放，则按其基线对齐。如果有多个单独的文本块，则对齐其左边界或右边界。如果有图片元素，将其边界与页面的其他边界对齐。

绝对不要在页面上任意摆放元素。

在设计中，统一性是一个重要的概念。要让页面上的所有元素看上去统一、有联系而且彼此相关，需要在各个单独的元素之间存在某种视觉纽带。

对齐的根本目的是使页面统一而且有条理。

要避免在页面上混合使用多种文本对齐方式。

亲密性（Proximity）

彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

亲密性的思想并不是说所有一切都要更靠近，其真正的含义是：如果某些元素在理解上存在关联，或者相互之间存在某种关系，那么这些元素在视觉上也应当有关联。除此之外，其他孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现出元素之间是否存在关系。

要有意识地注意您是怎样阅读的，你的视线怎样移动；从哪里开始；沿着怎样的路径；到哪里结束；读完之后，接下来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有确定的结束。

不要仅仅因为有空白就把元素放在角落或中央。

避免一个页面上有太多孤立的元素。

先看下效果图：

a:hover有半透明的背景色，对于大部分浏览器，都可以使用alpha透明的png-32图片来完成此效果，而对于IE6，可以采取一个变通的办法，使用一种栅格的方法来模拟半透明。

在Fireworks里面建立一个透明背景的文件，就可以看到画布内显示的是白色和灰色交加的图案，如下图所示。

其实这就是我们借鉴的原理——白色为不透明区域，灰色区域为透明区域——来模拟半透明的效果，如下图所示。

制作方法有很多种，在此介绍一种：

1.在Fireworks内新建一个2px宽2px高的新文件，如下图所示。

2.使用矩形矢量工具画2个1px宽高的正方形，颜色为黑色，如下图所示。

3.保存文件（bg1.png）。

4.在设计稿内，取一个背景色颜色值，位置如下图所示（颜色值为比较平均的颜色，可能需要反复尝试）。

5.再新建一个新文件，如下图所示（尺寸根据实际情况而定，源文件）。

6.画一个和文件尺寸一样的矩形，如下图所示。

7.导出为png-8文件，优化设定如下图（也可以保存为gif图片）。

8.在CSS应用此文件查看效果，如果颜色不合适，可以调整。

在此不再赘述CSS的写法。

这个方法适用在背景颜色比较单纯的情况，如果是颜色丰富的照片，其上的文字可能会不清晰，如下图所示。

此方法只是一个研究，欢迎大家探讨。

—-查看示例—-

在此讨论第一题：

图1：题目1需求

此题主要的难点在于：

1. 标题文字部分不能直接设定width，因为当文字少的时候，需要日期跟随其后；
2. 标题文字过多时，需要截断多余文字，但是同时不能出现半个中文字的情况。

首先看结构：

<ol class="newsList">
<li><a href="#">标题文字部分不能直接设定width</a><span>2009-10-01</span></li>
<li><a href="#">因为当文字少的时候，需要日期跟随其后</a><span>2009-10-02</span></li>
<li><a href="#">标题文字过多时，需要截断多余文字，但是同时不能出现半个中文字的情况</a><span>2009-10-03</span></li>
<li><a href="#">日期跟随着标题比较容易解决，将标题（a元素）左浮动（float:left）</a><span>2009-10-04</span></li>
<li><a href="#">标题文字为1行高，不设定标题（a）的宽度</a><span>2009-10-05</span></li>
<li><a href="#">则其文字会自动回行</a><span>2009-10-06</span></li>
</ol>

一般情况下普遍会采用这样的结构。

序号部分，可以使用设定列表背景图来实现，在此不讨论，主要讨论日期跟随标题的问题。

一、标题文字过长的隐藏

标题文字为1行高（line-height），不设定标题（a）的宽度。当文字过长时会自动回行，同时设定li的高度（与行高相等）和“overflow:hidden”即可将第2行以后的文字隐藏，如下图所示。

图2：隐藏多余文字的原理

相应代码：

.newsList li {
height:2em; /* height要与line-height相等，才会保证显示1行文字。 */
line-height:2em;
position: relative;
......
}

二、日期（span）跟随标题（a）日期跟随标题

日期部分比较简单：

.newsList li span {
padding-left:10px;
background:#FFCCCC;  /* 背景色为了标识出日期块的大小。 */
font:10px/2.4em Tahoma, Geneva, sans-serif;  /* 此处设定字号为10px是为了使英文字更美观一些。 */
vertical-align:top;
white-space:nowrap;  /* 设定文字不回行，保证日期于1行内显示。 */
}

日期跟随标题的实现方法有几种，但是目前经对主流浏览器的测试来看，都不能算完美。

先看最容易想到的：

1. 全部浮动

思路：

将日期元素和标题元素全部浮动（float:left），不设定标题的宽度。浮动元素如果widht为auto（默认值），则其宽度会被压缩至其内容的实际宽度，即宽度会由内容决定。因此当标题字数少的时候，标题宽度由字数决定，日期跟随在标题文字之后浮动。

但是需要为标题元素a设定max-width，使其到达一定宽度以后折行。

最大宽度= 列表的宽度（本例为300px）-日期总宽度（本例为字号10px*5字数_注1）-10px（题目规定的日期和标题的距离）。

.newsList li a {
float:left;
max-width:240px;  /* 300-10*5-10 */
}
.newsList li span {
float:left;
}

查看示例文件！

缺点：

1. IE 6-不支持max-width属性，要兼容则需要使用JavaScript或者expression。对于expression，使用不当很容易造成占用资源。
2. 要根据列表宽度和日期的宽度计算出标题最大宽度，若修改列表宽度，则同时要重新计算标题最大宽度及修改。

2. 标题浮动日期绝对定位

思路：

标题仍然浮动。

设定li的定位为相对定位（position: relative），为其后代元素产生包含块。

而设定日期绝对定位（position:absolute），同时不指定left（即left:auto），此时本例中日期元素的left为静态定位（即不设定绝对定位时）的left值，width属性会被压缩到其内容的实际宽度。当标题文字较少时，其表现和全浮动类似。

与全浮动不同的是，本例不用设定标题的最大宽度，而是设定li的padding-right（日期总宽度+10px）。此时，li的内容宽度 = ul宽度 – padding-right。

当a的宽度大于其父元素li的宽度的时候，文字会回行。而对于绝对定位的span元素，则会随着a的宽度的增加，被推到li的padding-right位置上（li生成的包含块的范围）。

.newsList li { padding-right: 60px; }
.newsList li a { float:left; }
.newsList li span { position:absolute; top:0; }

查看示例文件！

缺点：

1. 不兼容Opera 10-。Opera中，绝对定位的元素默认位置为包含块的左边和上边，如下图所示。

图3：Opera 默认的定位位置与其他浏览器不同

3. 日期包含在标题元素内

由于上面的方法不兼容Opera 10-，因此从另一种思路来入手：

将日期包含在标题a元素内，a的宽度由内容撑开，日期元素span仍旧绝对定位，但是设定相对于a元素right:0，使其保持在右端。

结构：

<ol class="newsList">
<li><a href="#">标题文字部分不能直接设定width<span>2009-10-01</span></a></li>
<li><a href="#">因为当文字少的时候，需要日期跟随其后<span>2009-10-02</span></a></li>
<li><a href="#">标题文字过多时，需要截断多余文字，但是同时不能出现半个中文字的情况<span>2009-10-03</span></a></li>
<li><a href="#">日期跟随着标题比较容易解决，将标题（a元素）左浮动（float:left）<span>2009-10-04</span></a></li>
<li><a href="#">标题文字为1行高，不设定标题（a）的宽度<span>2009-10-05</span></a></li>
<li><a href="#">则其文字会自动回行<span>2009-10-06</span></a></li>
</ol>
</div>

相应的CSS：

.newsList li a { position:relative; float:left; padding-right:60px; }
.newsList li a span { position:absolute; top:0; right:0; z-index:10; padding:0; color:#000; }

就本猫的测试而言，这个是目前比较好的方法。

查看示例文件！

这样做还有一个附加功能，让日期也可点击。=^^=

本例对于学习定位、包含块、浮动元素的视觉格式化有很好的功效。同时，还会遇到一些浏览器有意思的Bug，大家可以自行研究。

想做到让最外边的 div.wrap 内部不论有多少div（宽/高为100px，1px的边框）都不换行，并且撑开div.wrap，请问有什么办法？

就是说实现下面的效果：

■■■■■■■■■■■■■■■■………..

不要以下，这样就不行了：

■■■■■■■■■■
■■■■■■

要求兼容性：ie6/7/8，ff3，opera 9+

结构：

<div>
<div><p>div的内容要换行。</p></div>
<div><p>div的内容要换行。</p></div>
<div><p>div的内容要换行。</p></div>
<div><p>div的内容要换行。</p></div>
<div><p>div的内容要换行。</p></div>
<!--div是不定数量的-->
</div>

如果对内部的div设定float，当浮动元素填满父元素宽度的时候，会折行。

CSS 2.1中，display有很多值，但是由于部分浏览器（主要是IE 6）不支持而长期被忽视了。

下面介绍两种实现的方法：

方法1：display: inline-block

“inline-block（行内块）”是CSS 2.1增加的一个值，“inline-block”类型的元素产生块框，但是却又具有行内元素的特性，例如可以像行内元素一样在一行内显示，又可以可以设定宽度和高度等（块级元素），其表现比较类似一个行内替换元素。

因此可以设定CSS如下：

.wrap { white-space:nowrap; }
  .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }

“white-space:nowrap;”将强制在同一行内显示所有文本，直到文本结束或者遭遇br元素，因此wrap的内容不会回行。

有些浏览器并不支持“inline-block”，例如IE 7.0-和Firefox 2.0-。

对于IE，对行内元素设定“display: inline-block;”，例如：

span { display: inline-block; }

这样会触发IE内部的“hasLayout”属性，从而使行内元素拥有了“inline-block”类型元素的某些表现。

而IE中直接设定块级元素“display: inline-block;”是达不到预期效果的，而需要如下设定：

.wrap div {
display:inline-block;  /* 先使用display:inline-block属性触发hasLayout属性 */
……
}
.wrap div {
display:inline;  /* 再定义display:inline，让块元素呈递为行内元素 */
}

对于Firefox，虽然可以使用其私有属性“display: -moz-inline-box;”来模拟此效果，但是由于这个私有属性会产生其他问题，因此不推荐使用。

因此完整的CSS如下：（查看示例文件。）

.wrap { white-space:nowrap; }
  .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }
  .wrap div { *display:inline; }
    .wrap div p { white-space:normal; }

此种方法比较简单，但是由于对源代码中的空格浏览器处理方法不一样，会造成内部div之间的间距不等，本例未处理此问题。

产生此间距的原因，是标签之间的空格——元素标签间的空格和制表符会被压缩为1个空格显示，而对于这些空格的处理，浏览器存在差异。删除内部div之间的空格，可以解决问题。

方法2：display:table-cell

display:table-cell：将元素作为表格单元格显示。

也就是让这些div都变成一行内的单元格，所以不会回行。（查看示例文件。）

.wrap { display:table; }
  .wrap div { border:1px solid; display:table-cell;}
    .wrap div p{ height:100px; margin:0; padding:0; width:100px; }

此种方法对于支持display:table-cell的浏览器，效果是统一的，但是对于table-cell类型的元素，在css的应用上有很多限制，例如margin无效、宽度和高度受同行和同列的其他单元格影响等。

但是此方法可以实现内部div的等高，即不设定高度，高度由内容决定，同一行的div等高。

同时，此方法对于IE 7-无效，因此针对IE 7- 还是要使用方法1。

匹配所有E元素，当此元素是其父元素的最后一个子元素时。例如：

li:last-child { …… }

和:first-child类似，这两个伪类在设定菜单样式（特别是导航菜单）的时候很有用，很多情况下，菜单的第1项和最后1项会和其他项稍有不同，例如：(查看示例文件)

#sample10 li {
border-right:1px solid #039;
float:left;
line-height:1.4;
list-style:none;
margin-left:5px;
padding-right:5px;
}
#sample10 li:last-child {
border:none;
}

<div id="sample10">
  <ul>
     <li><a href="#1" title="单击返回网站首页">首页</a></li>
     <li><a href="#2" title="单击前往博客首页">博客</a></li>
     <li><a href="#3" title="单击前往游戏频道首页">游戏</a></li>
     <li><a href="#4" title="单击前往论坛首页">论坛</a></li>
  </ul>
</div>

7. E:first-of-type

根据E的类型匹配所有兄弟元素中第一个此类型元素，类似于“:nth-of-type(1)”。

8. E:last-of-type

根据E的类型匹配所有兄弟元素中最后一个此类型元素。

例如：(查看示例文件)

#sample12 div:first-of-type {
background:#FF9;
}
#sample12 div:last-of-type {
background:#6CF;
}

<div id="sample12">
 <p>p 1</p>
 <div>div 1</div>
 <p>p 2</p>
 <div>div 2</div>
 <p>p 3</p>
 <div>div 3</div>
 <p>p 4</p>
 <div>div 4</div>
 <p>p 5</p>
</div>

9. E:only-child

匹配那些是其父元素唯一孩子的E元素。

例如：(查看示例文件)

#sample13 p em:only-child { /* sample13 内 p 内的 em，且em是p唯一子元素。*/
background:#FF9;
}

<div id="sample13">
<p>p1, <em>子元素1：em</em></p>
<p>p2, <em>子元素1：em</em>，<strong>子元素2：strong</strong></p>
<p>p3, <strong>子元素1：strong</strong></p>
</div>

p1内的em为唯一子元素，因此匹配

p1内的em为唯一子元素，因此匹配；而p2内的em，不是唯一子元素因此不匹配；而p3内strong虽然是唯一子元素，但是不是em元素，因此也不匹配。

10. E:only-of-type

根据E的类型，匹配那些在其兄弟里是唯一此类元素的E元素。

例如：(查看示例文件)

#sample14 p em:only-of-type { /* sample14 内 p 内的 em，且是p的子元素中唯一的em。*/
background:#6CF;
}

<div id="sample14">
<p>p1, <em>子元素1：em</em></p>
<p>p2, <em>子元素1：em</em>，<strong>子元素2：strong</strong></p>
<p>p3, <em>子元素1：em</em>，<em>子元素2：em</em>，<strong>子元素3：strong</strong></p>
</div>

而p3内有两个em元素，因此不匹配

p1内em为唯一子元素，因此匹配；p2内，虽然有2个子元素，但是只有1个em元素，因此也匹配；而p3内有两个em元素，因此不匹配。

11. E:empty

匹配没有子元素的E元素。

在DOM树里，元素的内容也属于其子元素节点之一。例如：(查看示例文件)

#sample15 p {
border:1px solid #06C;
height:30px;
margin-bottom:5px;
}
#sample15 p:empty {
background:#6CF;
}

<div id="sample15">
<p></p>
<p>只有文本</p>
<p><em></em></p>
</div>

p:empty 将只匹配“<p></p>”。

p:empty 将只匹配第一个“<p></p>”。

• CSS3新增选择器[1]：更多的属性选择器
• CSS3新增选择器[2]：结构伪类(1)
• CSS3新增选择器[2]：结构伪类(2)
• CSS3新增选择器[2]：结构伪类(3)

CSS 3增加了大量的结构伪类，利用文档结构树来实现表现，从而可以减少页面内class属性和ID属性的定义，使得文档更加简洁。

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

——查看示例文件——

利用这个伪类，可以很容易地实现双背景色甚至多背景色表格等效果。
例如有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元素单独排序。

——查看示例文件——

• CSS 3选新增择器[1]：更多的属性选择器
• CSS3新增选择器[2]：结构伪类(1)
• CSS3新增选择器[2]：结构伪类(2)
• CSS3新增选择器[2]：结构伪类(3)