:nth-last-child(n)选择器，倒数匹配子元素

:nth-last-child选择器

CSS中的:nth-last-child(n)伪类选择器匹配获取HTML元素的原理与前一个章节中介绍的:nth-child选择器的方式基本相同，都可以用来匹配父元素中的第n个子元素，且不论子元素的类型，这究竟是什么意思，见下方的语法提示部分。

---

语法及参数

A:nth-last-child(n){样式设置}

提示：该选择器匹配获取的是A选择器匹配到的元素的父元素中的倒数的第n个子元素，但是不一定会对其进行样式设置，只有当被匹配到的子元素的类型与A选择器选择的类型相同时，才能设置其样式。

参数解析表：

n的值	描述
数字	指定父元素的倒数第几个子元素被匹配。
odd或even	odd匹配排序为奇数的子元素；even匹配排序为偶数的子元素，注意，也是倒着数的奇偶数。
公式	如3n匹配排序为3的倍数的子元素，注意是倒着数的。

:nth-last-child(n)选择器实例代码，及在线编辑器

<div>
  <p class='x1y1z1'>这是div的子元素，排序1，倒着数的排序为6</p>
  <h6>这也是div的子元素，h6，排序2（倒数为5），在:nth-last-child选择器中排序不分元素类型</h6>
  <p class='x1y1z1'>排序3（倒数为4）</p>
  <p class='x1y1z1'>排序4（倒数为3）</p>
  <h6 class='x1y1z1'>排序5（倒数为2）</h6>
  <p class='x1y1z1'>排序6（倒数为1）</p>
</div>

<style>
  .x1y1z1:nth-last-child(1){color:blue;}
  .x1y1z1:nth-last-child(5){color:orange;} /*该选择器选择到的是排序为2的h6，但该h6的类属性不是x1y1z1，所以不设置样式，可以与下面的这个h6的选择器进行对比*/
  h6:nth-last-child(2){color:skyblue;}
  /*h6:nth-last-child(odd){color:green;}*/
  /*该注释内的h6选择器可以选择倒着数的奇数，并只对匹配到的元素中的h6设置样式，运行之后，可以上面的注释符号去除掉，再运行看看效果下面的选择设置样式的是倒着数的排序是3的倍数的p元素*/
  /*p:nth-last-child(3n){color:pink;}*/
</style>

试一试