
但最近梅干遇到一個比較有趣的問題是,因為教學網中的麵包屑中,會完整的將文章的路徑包含該篇的文章標也一併秀出來,懶的去改原來的程式,想說那就用CSS將最後一筆的元素隱藏就好了,雖然正確的將最後一筆給隱藏了,但未端卻會出現一個箭頭,看起來好像後方還有元素,因此就在想怎麼選取倒數第二筆的元素,上網谷哥了好久,終於找到解決辦法,因此想要倒數選取元素的朋友,現在也一塊來看看囉!
Step1
一般要選取最後一個元素,大家再熟悉不過的,就是使用:last-child,就可輕鬆的選取到最後一個元素。

Step2
但倒數第二筆呢?方法也很簡單,只需用:nth-last-child(-n+筆數), 當倒數第二筆,則輸入2這時就會看到,倒數二個元素就會被選取起來了。

Step3
如要倒數三筆,就設為3。

Step4
由於CSS是由上往向下讀取並符合就套用,因此若希望倒數第一筆與倒數第n筆,套用不同樣式時,就可將順序調整一下,就可以符合需求囉!因此透過nth-last-child(),就可輕鬆的選取倒數的元素囉!

#範例預覽