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

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

解决方案：

first-of-type

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

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

  
This is the first paragraph.
  
This is the second paragraph.

							

								
								

									Moshi Chat
									
法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。
								
								下载 
							
						
  This is a span.
  
This is the third paragraph.

如果你想只给第一个

first-of-type

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

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

first-of-type

first-of-type

与

first-child

的区别是什么？

first-of-type

first-child

first-child

first-of-type

考虑以下 HTML 结构：

  This is a span.
  
This is the first paragraph.
  
This is the second paragraph.

如果使用

first-child

div :first-child {
  color: red;
}

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

如果使用

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

假设你有以下 HTML 结构：

  
First paragraph in container.
  
Second paragraph in container.
  
Third paragraph in container.



  
First paragraph in another 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

text-decoration

text-decoration

.special

first-of-type

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

first-of-type

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

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

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

  
Item 1
  
Item 2
  
Item 3

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

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

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

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

这些都是

first-of-type