如何使用 CSS 選擇特定類別的「最後一個孩子」？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 選擇特定類別的「最後一個孩子」？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 29, 2023 am 11:13 AM

如何使用 CSS 选择特定类别的“最后一个孩子”？

CSS或級聯樣式表是現代網頁開發的重要組成部分，它允許網頁開發人員為其網站添加樣式並創建視覺上吸引人的設計。有時我們想要使用CSS選擇特定類別的最後一個子元素，但是要如何實作呢？有不同的方法可以用來選擇最後一個子元素。

在本文中，我們將看到如何使用CSS選擇具有特定類別的最後一個子元素。

使用:last-child()選擇器的方法1：

:last-child()選擇器方法是CSS中可用的第一種方法。此選擇器用於選擇其父元素的最後一個子元素。選擇最後一個子元素的過程非常簡單。要選擇具有特定類別的最後一個子元素，我們將:last-child選擇器與類別選擇器組合使用。

查看下面的語法，了解如何使用last-child選擇器來選擇最後一個元素。

文法

在這個語法中，假設我們有一個帶有類別名為"item"的項目列表，並且我們想要以不同的樣式來設定列表中的最後一個項目，為了做到這一點，我們可以使用以下CSS程式碼-

.item:last-child {
   /* Add your CSS styles here */
}

上面的語法將選擇最後一個具有「item」類別的子元素，並對其套用指定的樣式。

範例

在此範例中，我們使用 :last-child() 選擇器選擇類別名為「item」的最後一個 div 元素，並向其新增 CSS 樣式，例如背景顏色為綠色，填入為 10px。

<html>
<head>
   <title>Program to select the last child using :last-child() selector</title>
   <style>  
      /* Using the :last-child Selector */
      .item:last-child {
         background-color: green;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2 id="Method-Using-the-last-child-Selector">Method: Using the :last-child Selector</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
</body>
</html>

方法 2：使用 :nth-last-child() 選擇器

這是在CSS中選擇具有特定類別的最後一個子元素的第二種方法。 :nth-last-child選擇器用於根據元素相對於父元素末尾的位置來選擇元素。

這個選擇器的工作非常簡單。要藉助 :nth-last-child 選擇器選擇特定類別的最後一個子級，我們必須將其與類別選擇器組合並將值設為 1。有關 nth-last 如何使用的更多詳細信息，請參閱以下語法-child選擇器用於選擇最後一個元素。

文法

在這個語法中，假設我們有一系列具有類別名為"div-box"的div元素，現在要對這個系列中的最後一個div元素進行樣式設置，我們可以使用以下CSS程式碼：

.div-box:nth-last-child(1) {
   /* Add your CSS styles here */
}

上述語法將選擇具有類別名為"div-box"的最後一個子元素，並對其套用指定的樣式。

範例

上述語法將選擇具有類別名為"div-box"的最後一個子元素，並對其套用指定的樣式。

<html>
<head>
   <title>Program to select the last child using :nth-last-child() selector</title>
   <style>
      /* Using the :last-child Selector */
      .item:nth-last-child(1) {
         background-color: lightblue;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2 id="Method-Using-the-nth-last-child-Selector">Method: Using the :nth-last-child Selector</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
</body>
</html>

使用JavaScript的方法

在這種方法中，我們使用 JavaScript 選擇具有特定類別的最後一個子項目。 CSS 是設定網頁樣式的首選方法，另一方面 JavaScript 也可用於執行文件物件模型操作並動態選擇 HTML 元素。

在 JavaScript 中，querySelector() 方法與類別選擇器和 :last-child 選擇器結合使用，以選擇具有特定類別的最後一個子級。

使用 JavaScript 選擇最後一個子項目的過程也很簡單。要藉助 javascript 選擇特定類別的最後一個子級，我們必須將其與類別和 CSS 的 :last-child-selector 結合。有關如何使用 javascript 選擇最後一個元素的更多詳細信息，請參閱以下語法。

文法

在此語法中，我們有一系列帶有「div」類別的div 元素，並且我們想要將「add-color」類別新增到清單中的最後一個div，我們可以使用以下JavaScript 程式碼-

ar lastDiv = document.querySelector('.div:last-child');
lastDiv.classList.add(add-color);

上述語法將選擇具有「div」類別的最後一個子元素，並新增「add-color」類別。

範例

在此範例中，我們定義了一個 div 元素列表，其類別名稱為“item”，之後我們也添加了一些 CSS 樣式。現在為了選擇最後一個子元素，我們定義了一個名為「highlight」的類，twitch 將設定最後一個 div 元素的樣式。

在這裡，我們使用了JavaScript中的querySelector()方法，該方法選擇具有"class"為"item"的最後一個子元素。然後，我們也使用classList.add()方法為所選元素新增了"highlight"類別。

<html>
<head>
   <title>Program to select the last child using JavaScript</title>
   <style>
      /* Styling for divs */
      .item {
         background-color: #f1f1f1;
         padding: 10px;
         margin-bottom: 10px;
      }
      /* Styling for last div */
      .highlight { background-color: yellow;}
   </style>
</head>
<body>
   <h2 id="Method-Using-JavaScript">Method: Using JavaScript</h2>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Fourth or Last Item</div>
   <script>
   
      // Selecting the last div element with class "item"
      var lastDiv = document.querySelector('.item:last-child');
      
      // Adding the "highlight" class to the last div element to change its background color
      lastDiv.classList.add('highlight');
   </script>
</body>
</html>

結論

使用CSS選擇具有特定類別的最後一個子元素是一項可以透過不同方法實現的任務。 :last-child()選擇器和:nth-last-child()選擇器是可以用來完成此任務的兩種方法。

:last-child()選擇器用於選擇其父元素的最後一個子元素。要選擇具有特定類別的最後一個子元素，我們將:last-child選擇器與類別選擇器結合使用。另一方面，:nth-last-child()選擇器用於根據相對於父元素末端的位置選擇元素。要使用:nth-last-child選擇器選擇特定類別的最後一個子元素，我們必須將其與類別選擇器結合使用，並將值設為1。

總而言之，這兩種方法都可以有效地選擇具有特定類別的最後一個子元素，並且使用哪種方法取決於 Web 開發人員的特定需求。透過使用這些選擇器，網頁開發人員可以增強其網站的外觀和功能，從而對使用者更具吸引力。

以上是如何使用 CSS 選擇特定類別的「最後一個孩子」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除