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 | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
IE9.0+ |