CSS Combinators

CSS 组合选择器阐明了两个选择器之间的关系，而 CSS 中的选择器用于选择要设置样式的内容。

一个 CSS 选择器中可以有多个简单选择器，在这些选择器之间，我们可以包含一个组合选择器。组合选择器将选择器组合起来，为它们提供有用的关系以及内容在文档中的位置。

CSS 中有四种类型的组合选择器，如下所示：

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

通用兄弟选择器 (~)

它使用波浪号 (~) 作为元素之间的分隔符。它选择第一个选择器元素之后的元素，并且两者都是同一父级的子级。它可用于选择共享同一父元素的元素组。

当我们需要选择一个元素的兄弟元素，即使它们不直接相邻时，它也很有用。

语法

假设我们必须选择所有是 <div> 元素的兄弟元素的 <p> 元素，那么我们可以这样写：

下图帮助我们理解通用兄弟选择器 (~)。

在此图中，绿色块是使用通用兄弟选择器后受影响的选中块。

示例

在这个例子中，我们选择 <h1> 之后的 <p> 元素。有一个 <div> 元素不会被选中，div 内部的段落元素也不会被选中。但是 <div> 之后的 <p> 元素会受到影响。

此示例将说明通用兄弟选择器 (~) 的用法。

输出

相邻兄弟选择器 (+)

它使用加号 (+) 作为元素之间的分隔符。它只在第二个元素紧跟在第一个元素之后，并且两者都是同一父级的子级时才匹配第二个元素。此兄弟选择器选择相邻元素，或者我们可以说选择指定标签旁边的元素。

它只选择紧邻指定第一个元素的元素。

语法

如果我们要选择紧跟在另一个段落后面的段落，那么使用相邻选择器，它将如下所示：

下图帮助我们理解相邻兄弟选择器 (+)。

在此图中，绿色块是使用相邻兄弟选择器后受影响的选中块。选中了紧跟在另一个段落元素后面的段落元素。

示例

在此示例中，我们选择紧跟在 <p> 元素后面的 <p> 元素。有一个 <div> 元素不会被选中，div 之后的段落元素也不会被选中。但是紧跟在第三个段落旁边的 <p> 元素会受到影响。

此示例将说明相邻兄弟选择器 (+) 的用法。

输出

子选择器 (>)

它使用大于号 (>) 作为元素之间的分隔符。它选择父级的直接后代。此组合选择器只匹配文档树中的直接子元素。它比后代选择器更严格，因为它只在第一个选择器是第二个选择器的父级时才选择第二个选择器。

父元素必须始终放置在 ">" 的左侧。如果我们删除表示它是子组合选择器的大于号 (>)，那么它将成为后代选择器。

语法

如果我们要选择是 <div> 元素子元素的段落元素，那么使用子选择器，它将如下所示：

下图帮助我们理解子选择器 (>)。

在此图中，绿色块是使用子选择器后受影响的选中块。正如我们在图中看到的，只选择那些作为 div 元素直接子元素的段落元素。

示例

在此示例中，我们选择作为 <div> 元素子元素的 <p> 元素。它只选择那些作为 div 元素直接子元素的段落元素。

此示例将说明子兄弟选择器 (>) 的用法。

输出

后代选择器 (空格)

它使用空格作为元素之间的分隔符。CSS 后代选择器用于匹配特定元素的后代元素，并使用单个空格表示。后代一词表示在 DOM 树中的任何位置嵌套。它可以是直接子级或更深五层，但它仍然被称为后代。

它组合了两个选择器，其中第一个选择器表示祖先（父级、父级的父级等），第二个选择器表示后代。如果第二个选择器匹配的元素具有匹配第一个选择器的祖先元素，则选择它们。

语法

如果我们要选择是 <div> 元素子元素的段落元素，那么使用后代选择器，它将如下所示：

下图帮助我们理解后代选择器。

示例

输出