html - 如何使用头胎？

Question

我想选择第一个名为“aProduct”的 div，但我对如何执行此操作有点困惑。我已经试过了:

<div id="kasticketProducts">
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>    
</div>

这是我当前的 CSS:

#kasticketProducts:first-child .aProduct {
    margin-top: 30px;
    background: red;
}

Answer 1

#kasticketProducts:first-child .aProduct使用上面的 css 意味着首先它将在第一个 child 中搜索带有 kasticketproducts 的 id，这里第一个 child 从这里引用 aProductHeader，您正在尝试搜索 aProduct 但它不在那里。实际上，从 DOM 层次结构来看，aProduct 类 div 位于第二个子级，这将在 css 中称为 nth-child(2) 并且不需要再次使用 .aProduct 。所以最终的解决方案是写为 #kasticketProducts div:nth - child (2)