css后代选择器与子选择器

tech2023-01-12  103

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后代选择器与子选择器

相关资源:jdk-8u281-windows-x64.exe
最新回复(0)