css后代选择器与子选择器_后代选择器（CSS选择器）

css后代选择器与子选择器

描述 (Description)

The descendant selector matches all elements that are descendants of a specified element. The first simple selector within this selector represents the ancestor element—a structurally superior element, such as a parent element, or the parent of a parent element, and so on. The second simple selector represents the descendant element we’re trying to match.

后代选择器匹配作为指定元素的后代的所有元素。 该选择器中的第一个简单选择器代表祖先元素 -结构上较高的元素，例如父元素或父元素的父元素，依此类推。 第二个简单的选择器代表我们要匹配的后代元素。

The combinator we use in a descendant selector is a whitespace character: a space, horizontal tab, carriage return, line feed, or form feed. Since whitespace characters are allowed around all combinators, you can include more than one whitespace character between the simple selectors in a descendant selector.

我们在后代选择器中使用的组合器是一个空白字符：空格，水平制表符，回车，换行或换页。 由于所有组合器周围都允许使用空格字符，因此您可以在子代选择器的简单选择器之间包含多个空格字符。

Consider the following HTML fragment:

考虑以下HTML片段：

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Sub-item 2A</li>
      <li>Sub-item 2B</li>
    </ol>
  </li>
</ul>

We’ll try to match elements in the above fragment using the selector below:

我们将尝试使用以下选择器匹配上述片段中的元素：

ul li {
  ⋮ declarations
}

This descendant selector will match all four li elements in the example HTML, because each of those elements has a ul element as its ancestor.

此后代选择器将匹配示例HTML中的所有四个li元素，因为这些元素中的每一个都有一个ul元素作为其祖先。

We can also use descendant selectors to match the li elements within the ol in the example above:

在上面的示例中，我们还可以使用后代选择器来匹配ol中的li元素：

ul * li {
  ⋮ declarations
}
ul * * li {
  ⋮ declarations
}
ul * ol li {
  ⋮ declarations
}
ul li * li {
  ⋮ declarations
}
ul ol li {
  ⋮ declarations
}
ul li li {
  ⋮ declarations
}
ul li ol li {
  ⋮ declarations
}

However, there’s no way we can use descendant selectors to match only the list items in the unordered list. To do that, we’d need a child selector.

但是，我们无法使用后代选择器仅匹配无序列表中的列表项。 为此，我们需要一个子选择器。

例 (Example)

Take a look at this example of the descendant selector in action:

看一下实际的后代选择器的示例：

ul li {
  ⋮ declarations
}

This selector matches all li elements that are descendants of a ul element—that is, every li element that has a ul element as its ancestor.

该选择器匹配作为ul元素后代的所有li元素，即，每个以ul元素为祖先的li元素。

翻译自: https://www.sitepoint.com/descendant-selector-css-selector/

css后代选择器与子选择器