CSS3新增选择器[2]：结构伪类(2)
2009年9月4日
3. E:nth-last-child(n)
匹配所有在其父元素中排倒数第 n 个且类型为 E 的元素。
这个伪类与:nth-child(n)类似，只是以最后一个子元素为起点计算。
提示：以下示例，请使用Google Chrome、Firefox 3.5+、Safari 3.1+或者Opera 9.63+查看。
例如：(查看示例文件)
#sample6 li:nth-last-child(2) { /* #sample6子元素内的倒数第2个li */
background:#FF9;
}
<ol id="sample6"> <li>倒数第4个li</li> <li>倒数第3个li</li> <li>倒数第2个li</li> <li>倒数第1个li</li> </ol>
匹配倒数第2个li
此处需注意，倒数第n个元素，可能类型不是E，那么将不匹配。
例如：(查看示例文件)
#sample7 p:nth-last-child(2) { /* #sample7子元素内的倒数第2个元素，且类型为p */
background:#FF9;
}
#sample8 p:nth-last-child(2) { /* #sample8子元素内的倒数第2个元素，且类型为p */
background:#FF9;
}
<h4>倒数第2个元素是p</h4> <div id="sample7"> <p>p 1</p> <div>div 1</div> <p>p 2</p> <div>div 2</div> <p>p 3</p> <div>div 3</div> </div> <h4>倒数第2个元素是div</h4> <div id="sample8"> <p>p 1</p> <div>div 1</div> <p>p 2</p> <div>div 2</div> <p>p 3</p> <div>div 3</div> <div>div 4</div> </div>
匹配倒数第2个元素，且类型为p
类型不是p则不匹配
#sample7所有子元素中，倒数第2个是p3，因此匹配，而#sample8所有子元素中，倒是第2的是div3，因此不匹配。
4. E:nth-of-type(n)
匹配所有 E 类型的子元素中的第 n 个，所有 E 类型的子元素被分离出来排序。
例如：(查看示例文件)
#sample9 p:nth-of-type(2) { /* #sample9子元素内类型为p 的第2个元素*/
background:#FF9;
}
<div id="sample9"> <p>p 1</p> <div>div 1</div> <p>p 2</p> <div>div 2</div> <p>p 3</p> <p>p 4</p> </div>
所有p单独排序
5. E:nth-last-of-type(n)
匹配所有 E类型的子元素中的倒数第n个，所有E类型的子元素被分离出来排序。
