针对div

Question

我正在尝试定位包裹“Target”的第一个div块。

<div class="box-content">
<div>
    <div>Target</div>
    <div>xxxx</div>
    <div>xxxx</div>
    <div>xxxx</div>
    <div>
       <div>Unwanted</div>
       <p>xxxx</p>
    </div>
</div>

我试过了;

div.box-content div div:nth-child(1)  {
display:none;
}

和

div.box-content div div:first-child {
display:none;
}

但它也删除了包含“不需要的”的div。我怎样才能仅定位包含“目标”的第一个

Answer 1

您想要选择直接子项，例如：

div.box-content > div > div:first-child {
  display:none;
}

您的原始代码会选择div:first-child作为祖先（{1}}作为祖先（不一定是直接父母）的div，这也是div.box-content ...的祖先。单词，对Target Unwanted和>的约束也没有限制。

上面的代码使用了div:first-child选择器，其中div只有在div.box-content的直接子时才应设置样式。 <{1}}

的直接孩子