简介

:first-of-type 选择器用于选择元素中第一个符合指定类型的元素。它与 :first-child 选择器类似，但 :first-of-type 仅选择指定类型的第一个元素，而 :first-child 选择元素中任何类型的第一个元素。

语法

:first-of-type {
  /* 样式 */
}

用法

:first-of-type 选择器可以用于多种目的，例如：

• 为页面上的第一个标题添加特殊样式
• 为列表中的第一项添加边框
• 突出显示表格中的第一行

示例

为页面上的第一个标题添加特殊样式

<h1>我是标题 1</h1>
<h2>我是标题 2</h2>

h1:first-of-type {
  color: red;
}

为列表中的第一项添加边框

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

li:first-of-type {
  border: 1px solid black;
}

突出显示表格中的第一行

-- -------------------- ---- -------
-------
  ----
    -----------
    -----------
  -----
  ----
    -----------
    -----------
  -----
--------
展开代码

tr:first-of-type {
  background-color: #ccc;
}

与其他选择器的结合

:first-of-type 选择器可以与其他选择器结合使用以实现更复杂的样式。例如，以下选择器将为页面上第一个具有 class="special" 类的标题添加特殊样式：

h1.special:first-of-type {
  /* 样式 */
}

浏览器支持

:first-of-type 选择器在所有现代浏览器中都得到良好的支持。

结论

:first-of-type 选择器是一种强大的工具，可用于选择元素中第一个符合指定类型的元素。它可以用于各种样式目的，并可以与其他选择器结合使用以实现更复杂的样式。