免用JS！如何透用CSS3的選擇器，選取倒數第二個元素區塊

　　透過CSS3的選擇器，讓CSS的設定變得更靈活，以前需要透過javascript的，現在利用CSS3就能快速完成，且完全不用寫任何的程式碼，對於一般的網頁設計師就能輕鬆上手，而在CSS3眾多的選擇器中，梅干還蠻常使用到nth-child不但方便且強大，透過nth-child可以快速的選擇區塊中的元素。

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

---

Step1
一般要選取最後一個元素，大家再熟悉不過的，就是使用:last-child，就可輕鬆的選取到最後一個元素。

---

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

---

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

---

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

---

#範例預覽