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 * {}

它选择子元素，但也选择该子元素。

我想做的是，

选择 ONLY 顶级子元素（在上面的示例代码中 - div.top-level-1，div.top-level-2和a.top-level-3 ）
类不会相同，因此首选的解决方案是不使用类。

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

Answer 1

使用> combinator仅选择顶级<div>的直接子女（任何类型）：

body > div > * {}

JSFiddle

Answer 2

div.parent＆gt; *：第一个孩子{color：red}

这会对你有用

Js fiddle: Fiddle

Answer 3

你可以使用它。

.parent > div {
   /*CSS goes here*/
}

Answer 4

我认为这会对你有所帮助：

a）选择所有div：

div{color:black;}

b）查找.parent div内的任何div（或.parent的直接孩子）

.parent > * {
    color:red;
}

Working Example

使用CSS选择顶级孩子

4 个答案: