html 选择器 大于号,在CSS选择器中使用空格或大于符号>

不,他们是完全不同的,使用>选择一个子元素,而使用空格将选择任何级别的嵌套元素.

例如…

在选择器中使用␣/空格…

This will be selected

This will be selected as well

所以在这里,具有空格的选择器将在父元素的任何嵌套级别定位div.

Demo(使用␣/空格)

.welcome div {

font-size: 20px;

color: #f00;

}

使用>

This won't be selected

This will be selected

而在这里,选择器将定位您的div,该元素是具有.welcome的元素的子元素,但它不会选择嵌套在段标签内的div,因为它是外部div的孙(但不是子)).

.welcome > div {

font-size: 20px;

color: #f00;

}

从MDN：(对于␣)

The ␣ combinator (that’s meant to represent a space, or more

properly one or more whitespace characters) combines two selectors

such that the combined selector matches only those elements matching

the second selector for which there is an ancestor element matching

the first selector. Descendant selectors are similar to child

selectors, but they do not require that the relationship between

matched elements be strictly parent-child.

从MDN :(对于>)

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of “hops” up the DOM.