使用CSS仅选择div的子代而不是孙子代[重复]

Question

我正在尝试使用 CSS 仅选择 div 的子项。

HTML：

<div class="wrapper">
  <div>Child
    <div>GrandChild</div>
  </div>
  <div>Child</div>
  <div>Child</div>
</div>

CSS：

.wrapper div:first-child {
  display: inline-block;
}

小提琴：https://jsfiddle.net/781vcf4L/3/

上述 CSS 仅将 CSS 属性应用于孙子。我删除了 :first-child 部分，它将属性应用于所有 div（子和孙）。

这就是我想要达到的目标：

<div class="wrapper">
  <div style="display: inline-block">Child
    <div>GrandChild</div>
  </div>
  <div style="display: inline-block">Child</div>
  <div style="display: inline-block">Child</div>
</div>

如何将 CSS 属性仅应用于子级？

Answer 1

两个选择器之间的空格是descendant combinator，不出所料，它会选择所有后代，包括子孙。

用child combinator (>) 替换它，它只选择孩子。