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（>），后者仅选择子项。

使用CSS仅选择div的子代，而不选择孙子代

1 个答案: