如何使用css和html5在div下找到第二个<p>元素？

Question

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

我需要在不使用id的情况下找到第二段

Answer 1

您可以使用nth-child选择器,设置为查找第二个子节点.这将选择作为其父级的第二个子元素的所有p元素:

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

或者,如果您只想在特定元素集中找到第二个子元素,则可以将这些元素包装在div中:

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

Answer 2

在这种情况下，我更喜欢使用:nth-of-type伪类：

div p:nth-of-type(2)

为什么选择:nth-of-type过:nth-child？

由于:nth-of-type是明确适用于情况（像你描述的那个）要在其中选择的第n个特定元素类型的给定范围内。

请参阅此工作示例：

div p:nth-of-type(2)

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

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

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

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

相反，它意味着一个元素是 ap并且也是第二个孩子。

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

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

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

你猜对了吗？

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