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>

打印页面