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>元素。

打印页面