HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？-html教程-PHP中文网

HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？

幻夢星雲

发布： 2025-08-11 18:12:03

原创

1066人浏览过

first-of-type 伪类用于选择父元素下第一个指定类型的子元素，如 div p:first-of-type 仅选中第一个 p 元素并应用样式；2. first-of-type 与 first-child 的区别在于前者按元素类型选择首个匹配项，后者选择父元素的第一个子元素，无论类型；3. first-of-type 可与类、id 或属性选择器组合使用，如 .container p:first-of-type 实现精确样式控制，但 p.special:first-of-type 若非首个同类型元素则不生效；4. 实际应用包括文章首段排版、列表首项样式、表单首个输入框样式及响应式设计优化，提升网页美观性与用户体验。

HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？

HTML设置首个子类型样式，主要通过

first-of-type

登录后复制

伪类来实现。它允许你选择父元素下的第一个特定类型的子元素，并为其应用样式。

解决方案：

first-of-type

登录后复制

伪类选择器用于选取属于其父元素的首个指定类型的子元素。这意味着，如果一个父元素下有多个相同类型的子元素，只有第一个会被选中。

立即学习“前端免费学习笔记（深入）”；

例如，假设你有以下 HTML 结构：

<div>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <span>This is a span.</span>
  <p>This is the third paragraph.</p>
</div>

登录后复制

如果你想只给第一个

<p>

登录后复制

元素应用样式，你可以使用

first-of-type

登录后复制

伪类：

div p:first-of-type {
  color: blue;
  font-weight: bold;
}

登录后复制

在这个例子中，只有 "This is the first paragraph." 这段文字会变成蓝色加粗。其他的

<p>

登录后复制

元素不受影响。

<span>

登录后复制

元素也不会影响

<p>

登录后复制

元素的

first-of-type

登录后复制

选择。

first-of-type

登录后复制

与

first-child

登录后复制

的区别是什么？

first-of-type

登录后复制

和

first-child

登录后复制

经常被混淆，但它们的选择逻辑完全不同。

first-child

登录后复制

选择器选择的是父元素的第一个子元素，无论它的类型是什么。而

first-of-type

登录后复制

选择器选择的是父元素下第一个特定类型的子元素。

考虑以下 HTML 结构：

<div>
  <span>This is a span.</span>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
</div>

登录后复制

如果使用

first-child

登录后复制

：

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

div :first-child {
  color: red;
}

登录后复制

那么 "This is a span." 这段文字会变成红色，因为它是

<div>

登录后复制

的第一个子元素。

如果使用

first-of-type

登录后复制

：

div span:first-of-type {
  color: green;
}

div p:first-of-type {
  color: blue;
}

登录后复制

那么 "This is a span." 会变成绿色，"This is the first paragraph." 会变成蓝色。

first-of-type

登录后复制

关注的是类型，而不是位置。

如何结合其他 CSS 选择器使用

first-of-type

登录后复制

？

first-of-type

登录后复制

可以与其他 CSS 选择器组合使用，以实现更精确的样式控制。例如，你可以结合类选择器、ID 选择器或属性选择器。

假设你有以下 HTML 结构：

<div class="container">
  <p>First paragraph in container.</p>
  <p class="special">Second paragraph in container.</p>
  <p>Third paragraph in container.</p>
</div>

<div>
  <p>First paragraph in another div.</p>
</div>

登录后复制

你可以这样使用：

.container p:first-of-type {
  font-style: italic;
}

p.special:first-of-type {
  text-decoration: underline; /* 这里不会生效，因为 .special 不是父元素的 first-of-type */
}

登录后复制

在这个例子中，只有 "First paragraph in container." 这段文字会变成斜体。

.special

登录后复制

类选择器尝试选择具有 "special" 类的第一个

<p>

登录后复制

元素，但由于它不是父元素中的第一个

<p>

登录后复制

，所以

text-decoration

登录后复制

不会生效。要让

text-decoration

登录后复制

生效，你需要保证它是其父元素的第一个

<p>

登录后复制

，并且具有

.special

登录后复制

类。

first-of-type

登录后复制

在实际项目中的应用场景有哪些？

first-of-type

登录后复制

在实际项目中有很多应用场景，尤其是在需要对特定类型的第一个元素进行特殊处理时。

文章排版：在文章中，你可能想让第一段文字有不同的样式，例如更大的字号或不同的颜色。

article p:first-of-type {
  font-size: 1.2em;
  color: #333;
}

登录后复制

列表样式：在列表中，你可能想让第一个列表项有特殊的边距或背景色。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

登录后复制

ul li:first-of-type {
  margin-top: 0;
  background-color: #f0f0f0;
}

登录后复制

表单样式：在表单中，你可能想让第一个输入框获得焦点或有不同的边框样式。

<form>
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
</form>

登录后复制

form input:first-of-type {
  border: 1px solid blue;
}

登录后复制

响应式设计：在响应式设计中，你可以根据屏幕大小调整第一个元素的样式，以优化用户体验。

这些都是

first-of-type

登录后复制

的常见应用场景。通过灵活运用这个伪类选择器，你可以更轻松地控制 HTML 元素的样式，提升网页的美观性和可用性。

以上就是HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？的详细内容，更多请关注php中文网其它相关文章！

HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？

first-of-type
登录后复制
与
first-child
登录后复制
的区别是什么？

如何结合其他 CSS 选择器使用
first-of-type
登录后复制
？

first-of-type
登录后复制
在实际项目中的应用场景有哪些？

HTML如何设置首个子类型样式？first-of-type伪类的用法是什么？

first-of-type登录后复制 与 first-child登录后复制 的区别是什么？

如何结合其他 CSS 选择器使用 first-of-type登录后复制？

first-of-type登录后复制 在实际项目中的应用场景有哪些？

first-of-type
登录后复制
与
first-child
登录后复制
的区别是什么？

如何结合其他 CSS 选择器使用
first-of-type
登录后复制
？

first-of-type
登录后复制
在实际项目中的应用场景有哪些？