定义与用法
:first-of-type 是一个 CSS 伪类选择器，用于选择某个父元素下的特定类型的第一个子元素。这种选择器可以让你更精确地控制样式，尤其是在处理复杂的 HTML 结构时。
示例
假设我们有以下的 HTML 结构：
<div class="container">
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<span>这是一个 span 元素</span>
<p>这是第三个段落</p>
</div>如果我们希望为第一个 <p> 元素应用特殊的样式，我们可以使用 :first-of-type 选择器：
.container p:first-of-type {
color: red;
}这样，只有第一个 <p> 元素会被选中并应用红色字体颜色。
使用场景
:first-of-type 选择器在需要对特定类型元素进行样式化时非常有用，特别是在动态生成内容或需要对列表项进行特殊处理的情况下。例如，在新闻列表中，你可能想为每篇文章的第一个标题设置特殊的样式。
注意事项
:first-of-type选择器是基于元素类型和父元素来工作的，这意味着即使元素出现在不同的位置，只要它们是相同类型的元素，并且是其父元素下该类型元素中的第一个，就会被选中。- 如果需要选择某个元素类型中的第一个元素，而不是第一个同类型的元素，可以考虑使用
:first-child选择器。 - 在某些情况下，你可能需要结合其他选择器一起使用，以实现更复杂的选择逻辑。
示例代码
以下是完整的示例代码，包括 HTML 和 CSS 部分：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- -------------- ----------
-------
---------- --------------- -
------ ----
-
--------
-------
------
---- ------------------
--------------
--------------
---------- ---- ---------
--------------
------
-------
-------在这个例子中，你会看到第一个 <p> 元素的文本显示为红色，而其他段落保持默认颜色。
深入理解
:first-of-type不仅限于段落（<p>），它可以应用于任何 HTML 元素，如<div>,<li>,<article>等等。- 如果你想选择某个元素类型中的第一个元素（而不一定是同类型的第一个元素），你应该考虑使用
:first-child选择器。 - 在实际开发中，结合使用多种选择器可以实现更灵活、更精细的样式控制。
通过以上内容，你可以更好地理解和应用 :first-of-type 选择器，从而在你的项目中更高效地进行样式化工作。
