CSS3新增选择器[2]：结构伪类(3)
2009年9月9日
6. E:last-child
匹配所有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>
提示：很多网站在导航内加入文字“|”或者插入空的li来实现竖线的方法，是很不标准的。
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>”。
