html - 如何在 中找到第二个 元素？

Question

哪个 CSS 选择器不使用 ID 匹配第二段？

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>

Answer 1

您可以使用 nth-child selector ，设置寻找老二。这将选择所有 <p>作为其父元素的第二个子元素的元素:

p:nth-child(2) {
  background-color: lightblue;
}

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>
<div>
  <p>Apple</p>
  <p>Mango</p>
</div>

或者，如果您想在一组特定元素中找到第二个子元素，您可以将这些元素包装在 <div> 中。 :

#wrapper p:nth-child(2) {
  background-color: lightblue;
}

<div>
  <p>Apple</p>
  <p>Mango</p>
</div>
<div id="wrapper">
  <p>Apple</p>
  <p>Mango</p>
</div>