码农教程 - 一技在手,衣食无忧! tools

目录

CSS 组合器

❮ 上一节 下一节 ❯

CSS 组合器

组合器是解释选择器之间关系的东西。

一个 CSS 选择器可以包含多个简单选择器。在简单的选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

  • 后代选择器（空格）
  • 子选择器 (>)
  • 相邻同级选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器

后代选择器匹配作为指定元素的后代的所有元素。

以下示例选择 <div> 元素内的所有 <p> 元素：

示例

div p {
  background-color: yellow;
}
亲自试一试 »

子选择器 (>)

子选择器选择作为指定元素的子元素的所有元素。

以下示例选择作为 <div> 元素子级的所有 <p> 元素：

示例

div > p {
  background-color: yellow;
}
亲自试一试 »

相邻兄弟选择器 (+)

相邻同级选择器用于选择直接位于另一个特定元素之后的元素。

同级元素必须具有相同的父元素，"adjacent" 表示"immediately following"。

以下示例选择紧邻 <div> 元素之后放置的第一个 <p> 元素：

示例

div + p {
  background-color: yellow;
}
亲自试一试 »

通用兄弟选择器 (~)

通用同级选择器选择指定元素的下一个同级元素的所有元素。

以下示例选择与 <div> 元素相邻的所有 <p> 元素：

示例

div ~ p {
  background-color: yellow;
}
亲自试一试 »

通过练习测试一下

练习:

将作为 <div> 元素后代的所有 <p> 元素的颜色更改为"red"。

<style>
 {
  color: red;
}
</style>

<body>

<div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>

开始练习

所有 CSS 组合选择器

Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

❮ 上一节 下一节 ❯