E:nth-last-child(n)

Posted 2021-03-22 furuihua

E:nth-last-child(n)

语法：

E:nth-last-child(n) { sRules }

说明：

匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。大理石平台维修

• 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
• 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
• 有一点需要注意的是：

  HTML示例代码：

  <div><p>第1个p</p><p>第2个p</p><span>第1个span</span><p>第3个p</p><span>第2个span</span></div>

  如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：

  p:nth-last-child(2){color:#f00;}

  而不是：

  p:nth-last-child(1){color:#f00;}

  因为倒数第1个p，其实是倒数第2个子元素。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找

  假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：

  p:last-of-type{color:#f00;}

  或者这样写：

  p:nth-last-of-type(1){color:#f00;}

  参考 E:last-of-type 和 E:nth-last-of-type(n)