CSS Descendant Selector

CSS 选择器用于选择 HTML 元素，以便为这些元素应用样式。CSS 中有许多选择器可用于选择HTML 元素。

一些选择器用于指定两个元素之间的关系，这些选择器被称为CSS 组合器。后代选择器是 CSS 组合器之一。在本文中，我们将理解后代选择器，但让我们先理解 CSS 组合器。

CSS 组合器

组合器用于描述两个选择器之间的关系。

例如，如果您想去一个名为“Shastri Nagar”的地方，并且您在地图上输入“Shastri Nagar”，它将显示许多同名地点列表。下次您指定城市名称并输入“Shastri Nagar, Ghaziabad”时，您将找到想要到达的确切位置。

这样，CSS 组合器通过指定两个选择器之间的关系来帮助定位和选择特定元素。CSS 组合器将两个选择器组合成一个选择器。重要的是要记住，元素必须满足两个选择器之间的关系。

语法

“selector1”和“selector2”是上面语法中的选择器。“combinator”的位置是组合器的符号，CSS 属性在花括号内声明。

后代选择器

CSS 后代选择器用于匹配特定元素的后代元素。后代一词表示 DOM 树中任何位置的嵌套。它可以是直接子元素，也可以是五层以上的深度，但仍将被引用为后代。

后代组合器通过使用单个空格表示。它组合了两个选择器，其中第一个选择器表示祖先（父元素、父元素的父元素等），第二个选择器表示后代。如果元素有匹配第一个选择器的祖先元素，则匹配第二个选择器的元素将被选中。后代选择器使用后代组合器。

语法

“selector1”和“selector2”是上面给定语法中的选择器。后代选择器是两个选择器之间的单个空格。CSS 属性在花括号内声明。

CSS 后代选择器演示

演示将帮助我们正确理解 CSS 后代选择器。让我们看看它是如何实现的。

演示 1

在此演示中，我们将使用 CSS 后代选择器为 HTML 元素设置样式。我们将使用 CSS 后代选择器为<p> 元素设置样式。

代码

输出

我们可以在下面的结果中看到，第一个段落、第二个段落和第三个段落都已设置样式，因为这三个<p> 元素是父元素“<div>”的后代元素。第四个段落没有受到影响，因为它不是 <div> 元素的子元素。

演示 2

• 在此演示中，我们将构建表格，并使用后代选择器为表格应用样式。
• 我们将使用后代选择器（空格）在类选择器“.employee-table”和元素选择器“th”之间定义关系，并在“Employee table”的<th> 元素上设置边框样式。
• 我们将使用后代选择器（空格）在类选择器“.product-table”和元素选择器“th”之间定义关系，并在“Product table”的<th> 元素上应用边框样式。

代码

输出

这是输出，我们可以看到“Employee table”和“Product table”应用了不同的边框样式。

演示 3

• 在此演示中，我们将创建两个列表，并使用后代选择器为它们设置样式。
• 我们将使用后代选择器（空格）在类选择器“.batsmen”和元素选择器“li”之间，选择特定的列表，即“List of Indian Cricket Batsmen”，并为 <li> 标签内的文本设置热粉色。
• 我们还将使用后代选择器（空格）在类选择器“bowlers”和元素选择器“li”之间，选择特定的列表，即“List of Indian Cricket Bowlers”，并为<li> 元素设置橄榄绿色。
• 我们将使用后代选择器（空格）在两个元素选择器之间，即div 和 h3，来选择特定的<h3> 元素。

代码

输出

在此输出中，我们可以看到“List of Indian Cricket Batsmen”和“List of Indian Cricket Bowlers”都应用了不同的文本颜色。

我们可以看到，“red”文本颜色已应用于 <div> 元素内的 <h3> 元素，该 <div> 元素的类属性值为“batsmen”，但样式未应用于其他 <h3> 元素，因为我们使用后代选择器专门选择了作为<div class=".batsmen"> 元素子元素的 <h3> 元素。

演示 4

• 在此演示中，我们将创建一个表单，并使用后代选择器为表单设置样式。
• 我们将使用后代选择器（空格）在两个元素选择器之间，即“div”和“label”，选择 <div> 元素内的所有 <label> 元素，并为 <label> 元素提供样式。
• 我们将使用后代选择器（空格）在两个选择器之间，即“div”和“input[type="text"]”，选择 <div> 元素内的所有“input[type="text"]”并提供样式。
• 我们将使用后代选择器（空格）在两个选择器之间，即“div”和“input[type="date"]”，选择 <div> 元素内的特定元素并提供样式。
• 我们将使用后代选择器（空格）在两个选择器之间，即“div”和“input[type="submit"]”，选择 <div> 元素内的特定元素并提供样式。

代码

输出

这是输出，我们可以看到样式已使用后代选择器应用于 <div> 元素的子元素 <label> 元素。

我们可以看到，样式已使用 CSS 后代选择器应用于 input[type="text"]、input[type="date"] 和 input[type="submit"]。

浏览器支持

以下是支持CSS 后代选择器的浏览器：

• 谷歌浏览器
• Opera
• Microsoft Edge
• Safari
• 火狐

结论

在本文中，我们已经理解了CSS 后代选择器。后代选择器定义了两个元素之间的关系。它用于选择后代元素并为其应用样式。