E:nth-last-child(n){ sRules }
HTML示例代码:
第1个p
第2个p
第1个span
第3个p
第2个span
如上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;}
IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|
6.0-8.0 | 4.0 | 4.0 | 14.0 | 15.0 |
9.0 |