html - 如何找到第二个a中的元素?

Question

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

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

Answer 1

您可以使用nth-child选择器，设置为找到第二个孩子。这将选择<p>作为其父级的第二个子级的所有元素：

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

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

或者，如果您想在一组特定元素中找到第二个子元素，您可以将这些元素包装在 a 中<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>

Answer 2

在这种情况下，我的偏好是使用:nth-of-type伪类：

div p:nth-of-type(2)

---

为什么选择:nth-of-typeover :nth-child？

因为明确:nth-of-type适用于您希望在给定上下文中选择特定元素类型的第 n 个的情况（如您描述的情况） 。

---

请参阅此工作示例：

div p:nth-of-type(2) {
  display: inline-block;
  padding: 6px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

<div>
<h2>Fruit Bowl</h2>
<p>Apple</p>
<p>Mango</p>
</div>

---

但我仍然可以使用:nth-child，对吧？

是的，你可以 - 但它可能并不总是给你你期望的结果。

语法div p:nth-child(2) 并不p意味着在给定上下文中的每一秒div（就像div p:nth-of-type(2)这样）。

相反，它表示一个元素，它是 ap并且也是第二个孩子。

知道了这一点，p你猜哪一个会在下面的例子中突出显示？

div p:nth-child(2) {
  display: inline-block;
  padding: 6px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

<div>
<h2>Fruit Bowl</h2>
<p>Apple</p>
<p>Mango</p>
</div>

你猜对了吗？

你现在明白 和 之间的区别了:nth-of-type(2)吗:nth-child(2)？

Answer 3

你应该使用nth-child.

p:nth-child(2) {  
  color: #ccc;
}

REF：第 n 个孩子如何工作