![梅問題-免用JS!如何利用CSS3的選擇器,選取倒數第二個元素區塊](http://photo.minwt.com/img/Content/CSS/css3-select-last-child/css3-select-last-child_00.jpg)
但最近梅干遇到一個比較有趣的問題是,因為教學網中的麵包屑中,會完整的將文章的路徑包含該篇的文章標也一併秀出來,懶的去改原來的程式,想說那就用CSS將最後一筆的元素隱藏就好了,雖然正確的將最後一筆給隱藏了,但未端卻會出現一個箭頭,看起來好像後方還有元素,因此就在想怎麼選取倒數第二筆的元素,上網谷哥了好久,終於找到解決辦法,因此想要倒數選取元素的朋友,現在也一塊來看看囉!
Step1
一般要選取最後一個元素,大家再熟悉不過的,就是使用:last-child,就可輕鬆的選取到最後一個元素。
![梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊](http://photo.minwt.com/img/Content/CSS/css3-select-last-child/css3-select-last-child_01.jpg)
Step2
但倒數第二筆呢?方法也很簡單,只需用:nth-last-child(-n+筆數), 當倒數第二筆,則輸入2這時就會看到,倒數二個元素就會被選取起來了。
![梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊](http://photo.minwt.com/img/Content/CSS/css3-select-last-child/css3-select-last-child_02.jpg)
Step3
如要倒數三筆,就設為3。
![梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊](http://photo.minwt.com/img/Content/CSS/css3-select-last-child/css3-select-last-child_03.jpg)
Step4
由於CSS是由上往向下讀取並符合就套用,因此若希望倒數第一筆與倒數第n筆,套用不同樣式時,就可將順序調整一下,就可以符合需求囉!因此透過nth-last-child(),就可輕鬆的選取倒數的元素囉!
![梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊](http://photo.minwt.com/img/Content/CSS/css3-select-last-child/css3-select-last-child_04.jpg)
#範例預覽