.parent > .child { /* 选择.parent的子元素.child */ /* 只会匹配直接子元素,不会匹配子元素的子元素 */ } .ancestor > .descendant { /* 选择.ancestor的子孙元素.descendant */ /* 只会匹配直接子元素,不会匹配子元素的子元素 */ }
举个例子,如果大家想为一个列表中所有的直接子元素添加样式,可以使用大于号选择器:
ul > li { /* 选择ul的直接子元素li */ }
这样可以只为一级列表项添加样式,而不会影响到后代元素,如下面这个例子:
- 一级列表项
- 二级列表项
- 三级列表项
在这个例子中,只有一级列表项会被添加样式,而不会影响到二级和三级列表项。这就是大于号选择器的作用。
需要注意的是,大于号选择器只能选择直接子元素,不可选择之后的所有后代元素。如果需要选择所有的后代元素,应该使用空格选择器。
.parent .child { /* 选择.parent的所有后代元素.child */ }
总之,大于号选择器是CSS选择器中非常实用的一个部分,可以帮助大家快速准确地选择需要样式化的元素,从而提高CSS的效率。