使用CSS选择顶级孩子

Question

是否可以使用CSS选择所有顶级儿童,无论其类型如何.

<div class="parent"> <div class="top-level-1">
 <!-- CONTENT -->
</div>
<div class="top-level-2">
 <!-- CONTENT -->
</div>
<a class="top-level-3">
 <!-- CONTENT -->
</a> </div>

我用的时候

.parent * {}

它选择子元素,但也选择该子元素.

我想做的是,

1. 仅选择顶级子元素(在上面的示例代码中 - div.top-level-1,div.top-level-2和a.top-level-3)

2. 类不会相同,因此首选不使用类的解决方案.

以下是更好理解的JSFiddle: http ://jsfiddle.net/Q4BBd/

Answer 1

使用>组合器仅选择顶级的直接子级(任何类型)<div>:

body > div > * {}

的jsfiddle