CSS first-of-type 介绍

在 CSS 中，:first-of-type 伪类用于选择父元素下的第一个与其同类型的子元素。这个伪类可以应用于任何 HTML 元素，在样式设计中非常有用。

使用语法

:first-of-type 伪类可以通过以下语法在 CSS 中使用：

selector:first-of-type {
  /* 样式声明 */
}

其中，selector 可以是任意的有效 CSS 选择器，包括元素选择器、类选择器、ID 选择器等。

样式示例

以下示例展示了如何使用 :first-of-type 伪类来选择第一个 <p> 元素，并将其文本颜色设置为红色：

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

这会将 HTML 中第一个 <p> 元素（而不是第一个子元素）的文本颜色设置为红色。

注意事项

• :first-of-type 伪类只能选中同一父元素下与选择器匹配的第一个子元素。如果要选中父元素下的第一个子元素，可以使用 :first-child 伪类。
• :first-of-type 伪类是结合了类型选择器和伪类的一种选择器，因此只能用于具有类型的标签元素，而不能用于 Pseudo 元素或其他选择器。
• 在 CSS3 中，:first-of-type 伪类支持传递参数，如 :nth-of-type() 和 :nth-last-of-type()，可用于选择符合一定规律的某一个子元素。

结论

:first-of-type 伪类是在样式设计中非常有用的一种选择器，能够帮助我们更有效地控制 HTML 中的元素。在使用它时，需要注意其唯一性并注意选择器的语法细节。