CSS - 偽類選擇器 :last-of-type

CSS 偽類選擇器:last-of-type用於選擇並設定其父容器內最後一種型別元素的樣式。此偽類允許您專門定位並應用樣式到給定容器內最後出現的特定型別的元素。

:last-child vs :last-of-type

CSS 偽類選擇器:last-child類似於:last-of-type，但存在差異：它不太具體。:last-child僅匹配父元素的最後一個子元素；而:last-of-type即使不是最後一個子元素，也匹配指定元素的子元素。

語法

:last-of-type {
   /* ... */ 
}

CSS :last-of-type 示例

這是一個:last-of-type偽類的示例，應用於<p>標籤，在<div>父元素下。

在此示例中，CSS規則僅應用於在<div>元素中找到的最後一個<p>元素，而不會影響同一容器內的其他<p>元素。

<html>
<head>
<style>
   p:last-of-type {
      color: black;
      background: peachpuff;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div>Parent element
      <p>first child, so no change</p>
      <p>second child, so no change</p>
      <p>last child, so :last-of-type pseudo-class is applied</p>
   </div>
</body>
</html>

這是一個:last-of-type偽類的示例，應用於<div>和<p>元素。

在上面的示例中，last-of-type CSS規則應用於<div>元素的最後一項，以及<p>元素。

<html>
<head>
<style>
   #container .item:last-of-type {
      color: blue;
      background-color: lightpink;
      font-weight: bold;
   }
   div,p {
      padding: 10px;
   }
</style>
</head>
<body>
   <div id="container">
      <div class="item">first div, so no change.</div>
      <div class="item">second div, so no change.</div>
      <div class="item">
         Third div, last child of the parent div, so CSS applied.
      </div>
      <p class="item">Last p element of its parent, selected by .container.item class selector.</p>
   </div>
</body>
</html>

列印頁面