CSS3新增选择器[2]：结构伪类(2)

 

CSS3新增选择器[2]：结构伪类(1)

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-last-child(2) { /* #sample9子元素内的倒数第2个元素，且类型为p */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类型的子元素被分离出来排序。

CSS3新增选择器[2]：结构伪类(1)