1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 免用JS!如何透用CSS3的選擇器,選取倒數第二個元素區塊

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

2021/04/22

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

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


Step1
一般要選取最後一個元素,大家再熟悉不過的,就是使用:last-child,就可輕鬆的選取到最後一個元素。
梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊
Step2
但倒數第二筆呢?方法也很簡單,只需用:nth-last-child(-n+筆數), 當倒數第二筆,則輸入2這時就會看到,倒數二個元素就會被選取起來了。
梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊
Step3
如要倒數三筆,就設為3。
梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊
Step4
由於CSS是由上往向下讀取並符合就套用,因此若希望倒數第一筆與倒數第n筆,套用不同樣式時,就可將順序調整一下,就可以符合需求囉!因此透過nth-last-child(),就可輕鬆的選取倒數的元素囉!
梅問題-免用JS!如何利用CSS3的選擇器,就可輕鬆選取倒數第二個元素區塊
#範例預覽