css 父选择器 使用方法

css 父选择器使用方法

CSS 父选择器通常是指后代选择器（descendant selector）和子元素选择

器（child selector）。它们可以帮助我们选择特定元素的父元素或子元素。

1. 后代选择器（Descendant Selector）：通过空格分隔，可以选择某元素的所有后代元素，不论层级。

示例：

```css

div p {

color: red;

}

```

上述样式会选择所有在 `

` 元素内部的 `

` 元素，不论 `

` 是在

`

` 的哪一层。

2. 子元素选择器（Child Selector）：通过 `>` 符号分隔，可以选择某元素

的直接子元素。

示例：

```css

div > p {

color: red;

}

```

上述样式只会选择 `

` 的直接子 `

` 元素，不会选择更深层次的

`

` 元素。

此外，还有一些伪类选择器可以用来选择特定状态的父元素或子元素，例如：

`:hover`：当用户将鼠标悬停在元素上时选择该元素。

`:active`：当用户与元素交互（例如点击按钮）时选择该元素。

`:focus`：当元素获得焦点时选择该元素。

`:first-child`：选择元素的第一个子元素。

`:last-child`：选择元素的最后一个子元素。

`:nth-child(n)`：选择元素的第 n 个子元素。

这些伪类选择器可以与其他选择器结合使用，以选择特定状态的父元素或子元素。例如，`div:hover p` 会选择所有在悬停状态下的 `

` 内部的

`

` 元素。