CSS 伪类

CSS 伪类 :first-of-type 用于在其父容器中选择该类型的第一个元素并为其设置样式。这个伪类允许您将样式专门定位到给定容器中第一次出现的某种元素。

CSS 伪类选择器 :first-child 类似于 :first- of-type，但有一个区别:它不太具体。 :first-child 只匹配父元素的第一个子元素；而 :first-of-type 匹配指定元素的子元素，即使它不是第一个。

语法

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

CSS :first-of-type 示例

以下示例演示了 :first-of-type 伪类的使用，应用于 <p> 父元素下的 <p> 标记。

在此示例中，CSS 规则仅适用于找到的第一个 <p> 元素在 <div> 元素内，而同一容器内的其他 <p> 元素不受影响。

<html>
<head>
<style>
   p:first-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>父元素
       <p>由于：first-of-type伪类，第一个孩子看起来不同</p>
       <p>第二个孩子，所以没有变化</p>
    </div>
    <div>父元素
       <h3>h3标签，所以没有改变</h3>
       <p><b>p</b> 标记，以及此父级下的第一个段落类型。</p>
    </div>
</body>
</html>

以下示例演示了 :first-of-type 伪类的使用，应用于 <li> 标记，在 <ul> 父元素下。

p>

在此示例中，CSS 规则仅适用于 <ul> 元素中找到的第一个 <li> 元素，同一容器中的其他 <li> 元素不受影响。

<html>
<head>
<style>
   ul li:first-of-type {
      color: black;
      background: yellow;
      font-weight: 600;
      font-size: 1em;
      font-style: italic;
      padding: 5px;
   }
   div {
      border: 2px solid black;
      margin-bottom: 5px;
      width: 300px;
   }
</style>
</head>
<body>
   <div>
      <ul>
         <li>One</li>
         <li>Two</li>
         <li>Three
            <ul>
               <li>Three 1</li>
               <li>Three 2</li>
               <li>Three 3</li>
            </ul>
         </li>      
      </ul>
   </div>
</body>
</html>