我正在学习CSS，我正在和nth-child做一些实验。让我们说我有代码：
<html>
<head>
<style>
div p:nth-child(n+3)
{
color: red;
}
</style>
</head>
<body>
<div>
<h1>Title</h1>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<p> 4</p>
<p> 5</p>
<p> 6</p>
<p> 7</p>
<p> 8</p>
</div>
</body>
</html>
为什么当我指定我希望它只计算<p>2</p>个元素时，它会从<p>开始着色元素（你甚至可以这样做）吗？
假设我有另一个元素与另一个元素相同，其中有8个<p>元素，我如何指定我只想要第二个{<p>元素<div>元素1}}元素？
答案 0 :(得分：3)
<h1>与<div>元素共享<p>个父级（换句话说，<h1>和<p>元素是兄弟姐妹另一个）。这使得<h1>成为第一个孩子，因此第一个<p>成为第二个孩子，第二个<p>成为第三个孩子（此时:nth-child(n+3)开始匹配元素）等等。
对于按标记名称不同的元素，您可以改为使用:nth-of-type()：
div p:nth-of-type(n+3)
{
color: red;
}
像这样：
div:nth-child(2) p:nth-of-type(5)
{
color: red;
}
同样，如果<div>元素中有任何其他兄弟姐妹，:nth-child()将无法正常工作。您可以随时将其替换为另一个:nth-of-type()，如下所示：
div:nth-of-type(2) p:nth-of-type(5)
{
color: red;
}