如何使用CSS選擇具有特定類名的“最後一個子元素”？

使用 CSS 選擇具有特定類名的最後一個子元素是一個簡單的過程，可以使用CSS 偽類 選擇器。在本文中，我們將瞭解三種不同的方法來使用CSS選擇具有特定類名的最後一個子元素。

我們的 HTML文件中有四個div元素，我們的任務是使用CSS選擇具有特定類名的最後一個子元素。

使用CSS選擇最後一個子元素的方法

以下是本文將討論的使用CSS選擇具有特定類名的最後一個子元素的方法列表，其中包含逐步說明和完整的示例程式碼。

使用last-child選擇器選擇最後一個子元素

要使用CSS選擇具有特定類名的最後一個子元素，我們將使用CSS last-child 偽類選擇器，它選擇其父元素內的最後一個元素。

  • 我們使用了四個div標籤來指定四個元素，我們將只定位最後一個元素。
  • 然後，我們使用了".item:last-child" 選擇器，它選擇最後一個專案。
  • 最後，我們使用了background-color、color和padding 屬性，它們添加了綠色背景和白色文字，以區分最後一個子元素和其他元素。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用CSS last-child 偽類選擇器選擇具有特定類名的最後一個子元素。

<html>
<head>
    <style>
        .item:last-child {
            background-color: #04af2f;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>last-child 
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
    <div class="item">First Item</div>
    <div class="item">Second Item</div>
    <div class="item">Third Item</div>
    <div class="item">Last Item</div>
</body>
</html>

使用nth-last-child選擇器選擇最後一個子元素

在這種使用CSS選擇具有特定類名的最後一個子元素的方法中，我們將使用CSS nth-last-child 偽類選擇器，它根據元素從末尾開始的同級元素中的位置來選擇元素。

  • 為了建立和設計子元素，我們使用了與方法一類似的方法，即步驟一和步驟三。
  • 我們使用了".item:nth-last-child(1)"，它選擇最後一個子元素。引數中的“1”表示在四個同級元素中選擇最後一個子元素。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用CSS nth-last-child 偽類選擇器選擇具有特定類名的最後一個子元素。

<html>
<head>
   <style>
      .item:nth-last-child(1) {
         background-color: #04af2f;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>nth-last-child()
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Last Item</div>
</body>
</html>

使用last-of-type選擇器選擇最後一個子元素

在這種方法中，我們將使用CSS last-of-type 偽類選擇器來使用CSS選擇具有特定類名的最後一個子元素，它選擇並設定其父容器內其型別的最後一個元素的樣式。

  • 為了建立和設計子元素，我們使用了與方法一類似的方法，即步驟一和步驟三。
  • 我們使用了".item:last-of-type"，它選擇並設定最後一個子元素的樣式。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用CSS last-of-type 偽類選擇器選擇具有特定類名的最後一個子元素。

<html>
<head>
   <style>
      .item:last-of-type {
         background-color: #04af2f;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>last-of-type
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Last Item</div>
</body>
</html>

結論

使用CSS選擇具有特定類名的最後一個子元素可以透過不同的方法實現。在本文中，我們使用了三種方法：使用last-child 選擇器、nth-last-child() 選擇器和使用last-of-type 選擇器。所有方法都能有效地選擇具有特定類名的最後一個子元素，使用哪種方法取決於使用者的具體需求。

更新於：2024年9月10日

6K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告