📜  第一个类型和第一个孩子之间的区别 - Html (1)

📅  最后修改于: 2023-12-03 15:41:08.170000             🧑  作者: Mango

第一个类型和第一个孩子之间的区别 - Html

在 HTML 中,第一个类型和第一个孩子有很大的区别。第一个类型是指 HTML 标签的第一个实例,而第一个孩子是指 HTML 元素的第一个子元素。

第一个类型

HTML 标签的第一个实例指的是 HTML 文档中出现的第一个特定标签。例如,HTML 文档中的第一个 <div> 标记就是第一个类型。在 HTML 中,使用 :first-of-type 伪类可以选择第一个类型。

使用 `:first-of-type` 伪类选择第一个类型:

```html
<div>第一个 <p> 段落</p></div>
<div>第二个 <p> 段落</p></div>
<div>第三个 <p> 段落</p></div>

<style>
div:first-of-type {
  color: red;
}
</style>

这将使第一个 div 标记中的文本变为红色。


## 第一个孩子

HTML 元素的第一个子元素称为其第一个孩子。要选择第一个孩子,可以使用 `:first-child` 伪类。例如,要使第一个 `div` 元素中的第一个 `p` 元素的文本为粗体,可以使用以下代码:

```markdown
使用 `:first-child` 伪类选择第一个孩子:

```html
<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>

<style>
div p:first-child {
  font-weight: bold;
}
</style>

这会使第一个 div 内的第一个 p 元素变为粗体。


总的来说,第一个类型和第一个孩子在 HTML 中有很大的区别。理解它们之间的差异对于编写有效的 CSS 规则非常重要。