引导者

## CSS :first-child 选择器### 简介`:first-child` 是一个 CSS 选择器，用于选择父元素中的第一个子元素。它是一个非常常用的选择器，可以用来对特定元素进行样式化，尤其是在需要针对列表、表格等结构进行特殊设计时。### 使用方法`:first-child` 选择器语法简单直观：```css selector:first-child {/

样式规则

/ } ```其中 `selector` 代表要选择的元素，例如 `p`、`li`、`div` 等。

举例:

```html

• 第一个列表项
• 第二个列表项
• 第三个列表项

``````css li:first-child {color: red; } ```以上代码会将第一个列表项的文字颜色设置为红色。### 使用场景`:first-child` 选择器在以下场景中非常实用：

列表样式设计:

针对列表第一个元素进行特殊样式设置，例如添加序号、图标等。

表格标题设置:

将表格第一行设置为标题行，并使用不同的样式。

布局设计:

针对页面上特定位置的第一个元素进行特殊样式调整，例如为第一个段落设置边框或背景色。### 注意点

`:first-child` 选择器只选择父元素的第一个子元素，即使该元素本身包含子元素。

`:first-child` 选择器不适用于伪元素，例如 `::before` 和 `::after`。

`:first-child` 选择器可以与其他选择器组合使用，以实现更精确的选择。### 总结`:first-child` 选择器是 CSS 中一个简单但实用的选择器，它可以帮助我们轻松地对父元素中的第一个子元素进行样式化，从而实现更丰富的设计效果。

CSS :first-child 选择器

简介`:first-child` 是一个 CSS 选择器，用于选择父元素中的第一个子元素。它是一个非常常用的选择器，可以用来对特定元素进行样式化，尤其是在需要针对列表、表格等结构进行特殊设计时。

使用方法`:first-child` 选择器语法简单直观：```css selector:first-child {/* 样式规则 */ } ```其中 `selector` 代表要选择的元素，例如 `p`、`li`、`div` 等。**举例:**```html

• 第一个列表项
• 第二个列表项
• 第三个列表项

``````css li:first-child {color: red; } ```以上代码会将第一个列表项的文字颜色设置为红色。

使用场景`:first-child` 选择器在以下场景中非常实用：* **列表样式设计:** 针对列表第一个元素进行特殊样式设置，例如添加序号、图标等。 * **表格标题设置:** 将表格第一行设置为标题行，并使用不同的样式。 * **布局设计:** 针对页面上特定位置的第一个元素进行特殊样式调整，例如为第一个段落设置边框或背景色。

注意点* `:first-child` 选择器只选择父元素的第一个子元素，即使该元素本身包含子元素。 * `:first-child` 选择器不适用于伪元素，例如 `::before` 和 `::after`。 * `:first-child` 选择器可以与其他选择器组合使用，以实现更精确的选择。

总结`:first-child` 选择器是 CSS 中一个简单但实用的选择器，它可以帮助我们轻松地对父元素中的第一个子元素进行样式化，从而实现更丰富的设计效果。