大兔的神密世界
  • search
  • apps
  • 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