Apr 17, 2018
·
1 min read
筆記
[CSS ] :last-child、:nth-last-child
┤如何使用├─────────────────────────────────
一、:last-child：同一父元素中，選擇最後一個子元素，其意思與:nth-last-child(1)
相同。
二、:nth-last-child(n)：同一父元素中，從最後一個子元素開始計數，選擇n條件的子元
素，而其中n可以是數字、關鍵詞（奇偶數）或公式（例如：3n+1）。
┤ 範例一 ├─HTML + CSS───────────────────────────
01 <html>
02 <head>
03 <style>
04 p:last-child { background: #F00; }
05 </style>
06 </head>
07 <body>
08 <p>A paragraph.</p>
09 <p>A paragraph.</p>
10 <p>A paragraph.</p>
11 </body>
12 </html>
┤輸出結果├─────────────────────────────────
A paragraph.
A paragraph.
A paragraph.
┤ 範例二 ├─HTML + CSS───────────────────────────
01 <html>
02 <head>
03 <style>
04 p:last-child(odd) { background: #F00; }
05 p:last-child(even) { background: #0F0; }
05 </style>
06 </head>
07 <body>
08 <p>A paragraph.</p>
09 <p>A paragraph.</p>
10 <p>A paragraph.</p>
11 </body>
12 </html>
┤輸出結果├─────────────────────────────────
A paragraph.
A paragraph.
A paragraph.
─┤筆記├──────────────────────────────────
太久沒學習新知了，以前不知道有這麼好用的東西，還自己寫一個class辨識the last
item，例如表格最後一列就要寫成<tr class="end">....</tr>，現在學得這新東西，以
後就只需要在CSS裡面規定tr:last-child{....}就可以達到效果，又不用再HTML裡加一堆
class屬性。
--
※ 發信站: 大兔的神密世界(BunnyBBS.nctu.me), 來自: 120.114.181.61