css后代选择器与子选择器

css后代选择器与子选择器

描述 (Description)

This selector matches all elements that are the immediate children of a specified element. The combinator in a child selector is a greater-than sign (>). It may be surrounded by whitespace characters, but if it is, Internet Explorer 5 on Windows will incorrectly treat it as a descendant selector. So the best practice is to eschew whitespace around this combinator.

该选择器匹配作为指定元素的直接子元素的所有元素。 子选择器中的组合器是一个大于号(>)。 它可能被空格字符包围，但是，如果是，则Windows上的Internet Explorer 5会将它错误地视为后代选择器。 因此，最佳实践是避开此组合器周围的空白。

Consider this HTML fragment:

考虑以下HTML片段：

<ul> <li>Item 1</li> <li> <ol> <li>Subitem 2A</li> <li>Subitem 2B</li> </ol> </li> </ul>

Let’s try to match elements in the above fragment with the selector below:

让我们尝试将上面片段中的元素与下面的选择器进行匹配：

ul>li { ⋮ declarations }

The child selector above will only match the two li elements that are children of the ul element. It will not match the subitems, because their parent is the ol element.

上面的子选择器将仅匹配ul元素的两个li元素。 它不会匹配子项，因为它们的父项是ol元素。

例 (Example)

Here’s an example of the child selector at work:

这是工作中的子选择器的示例：

ul>li { ⋮ declarations }

This selector matches all li elements that are the immediate children of a ul element—that is, all li elements that have a ul element as a parent.

此选择的所有匹配li是一个直接子元素ul元素，也就是说，所有的li有一个元素ul元素作为父母。

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

css后代选择器与子选择器