html - CSS:选择特定类型元素在 HTML 文档中的特定出现

Question

我正在尝试在 CSS 中选择一种元素类型的特定出现，以设置其样式。

例如:

<span>Some random stuff</span>
<p>Occurrence 1 of p</p>
<ul>
<li>Random stuff</li>
<li>More random stuff</li>
</ul>
<p>Occourence 2 of p</p>
<span>Even more random stuff</span>

我想在外部 CSS 中以不同的方式设置 p 的第 1 次和第 2 次出现的样式。我知道只使用内联 CSS 会更容易，但我需要在外部进行。另外，我知道我可以为 p 的每次出现使用一个 id 或类，但我想看看我是否可以找到一种方法来做到这一点。

Answer 1

如果不添加 ID 或类，听起来您正在寻找 :nth-of-type CSS 伪选择器:

p:nth-of-type(2) {
  color: red;
}
li:nth-of-type(1) {
  color: blue;
}

<span>Some random stuff</span>
<p>Occurrence 1 of p</p>
<ul>
  <li>Random stuff</li>
  <li>More random stuff</li>
</ul>
<p>Occourence 2 of p</p>
<span>Even more random stuff</span>

希望对您有所帮助! :)