本文共 2195 字,大约阅读时间需要 7 分钟。
css后代选择器与子选择器
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片段:
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.
但是,我们无法使用后代选择器仅匹配无序列表中的列表项。 为此,我们需要一个子选择器。
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
元素。
翻译自:
css后代选择器与子选择器
转载地址:http://tbrgb.baihongyu.com/