从许多div中选择第一个子元素

Question

如何在下面的这种情况下选择第一个子元素：

<div class="root">

  <div class="child">1</div> <---- i want this element

</div>
<div class="root">

  <div class="child">2</div> 

</div>
<div class="root">

  <div class="child">3</div> 

</div>

我尝试下面的CSS，但我选择了所有child元素

.child:first-child {
    ...
}

Answer 1

如果您希望这只影响第一个根，那么您还需要将第一个类型添加到root

.root:first-of-type > .child:first-of-type {
   ...
}