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

CSS偽類選擇器:only-of-type匹配或代表一個在其父容器中沒有相同型別兄弟元素的元素。

被此偽類選擇器選擇的元素必須具有父元素。

語法

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

CSS :only-of-type 示例

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

<html>
<head>
<style>
   .field {
      margin: 1px;
      padding: 1px;
   }

   p:only-of-type {
      color: darkblue;
      background-color: lightpink;
      padding: 5px;
   }

   h2:only-of-type {
      text-decoration-line: underline;
      color: green;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
   <div class="field">
      <h2>Heading 2 - only type</h2>
      <p>Paragraph tag - only type</p>
   </div>
   
   <div class="field">
      <h2>Heading 2 - only type</h2>
      <p>Paragraph tag 1 - we are two</p>
      <p>Paragraph tag 2 - we are two</p>
   </div>
</body>
</html>

在此示例中，CSS規則僅適用於在<div>父容器中找到的唯一<p>和<h2>型別元素。第二個<div>只有一個<h2>型別元素，但有兩個<p>元素，因此樣式僅應用於<h2>元素，而不應用於<p>元素。

列印頁面