html选择器有哪些child,子选择器 | Child selectors

子选择器 | Child selectors

该子元素组合因子(>)被放置在两个CSS选择器之间。仅当第二个选择器所匹配的元素是第一个选择器所匹配的元素的子节点时，该子元素选择器才会匹配那些子元素。

/* List items that are children of the "my-things" list */

ul.my-things > li {

margin: 2em;

}

由第二个选择器匹配的元素必须是由第一个选择器匹配的元素的直接子元素。这比后代选择器(descendant selector)更严格，后者仅要求第一个选择器选择出的元素能匹配第二个选择器选择出的元素的某些祖先节点即可，而不管DOM上“跳”的数量。

语法

selector1 > selector2 { style properties }

实例

CSS

span {

background-color: white;

}

div > span {

background-color: DodgerBlue;

}

HTML

Span #1, in the div.

Span #2, in the span that's in the div.

Span #3, not in the div at all.

结果

规范

Specification

Status

Comment

Selectors Level 4The definition of 'child combinator' in that specification.

Working Draft

​

Selectors Level 3The definition of 'child combinators' in that specification.

Recommendation

No change.

CSS Level 2 (Revision 1)The definition of 'child selectors' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

(Yes)

(Yes)

7.0

(Yes)

(Yes)

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

?

?

?

?