CSS - :only-child偽類

CSS 偽類選擇器:only-child匹配或表示其父元素的唯一子元素，或者換句話說，沒有兄弟姐妹的元素。此偽類的行為方式與:first-child :last-child或:nth-child(1) :nth-last-child(1)相同，但其特異性較低。

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

語法

:only-child {
   /* ... */ 
}

CSS :only-child() 示例

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

在此示例中，CSS規則僅適用於第一個<div>元素中找到的第一個<p>元素，因為它是唯一一個只有一個子元素的父元素。

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

   p:only-child {
      color: darkblue;
      background-color: lightpink;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
      <div class="field">
         <p>Only child of this div</p>
      </div>
      
      <div class="field">
         <p>First Child</p>
         <p>Second Child</p>
      </div>

      <div class="field">
         <h1>Heading - first child </h1>
         <p>Only p child, but second child</p>
      </div>
</body>
</html>

這是一個:only-child偽類的示例，應用於<li>標籤，在<ol>和<ul>父元素下。

在此示例中，CSS規則將應用於在<ol>和<ul>元素中找到的唯一<li>元素。

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

   li:only-child {
      color: darkblue;
      background-color: lightpink;
      padding: 5px;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
      <div class="field">
         <ol>Ordered list:
            <li>Only one item</li>
         </ol>
      </div>
      
      <div class="field">
         <ol>
            <li>One item</li>
            <li>Two item</li>
         </ol>
      </div>

      <div class="field">
         <ul>Unordered list:
            <li>First Item</li>
         </ul>
      </div>
</body>
</html>

列印頁面