html - 如何在不使用任何样式和类的情况下为 html 中的第二个 p 标记着色？

Question

我有 3 个 p 标签，

<p> hi </p>
<p>hello</P>
<p>bye</P>

我想通过仅使用纯 css(不使用任何 javascript)将第二个 p 标记着色为红色。在不使用任何内联样式和类的情况下，我如何实现这一目标？

<p> hi </p>
<p>hello</P>
<p>bye</P>

Answer 1

使用:nth-child :

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

<p>hi</p>
<p>hello</p>
<p>bye</p>

但是，正如 Hao Wu 所建议的那样，最好使用 :nth-of-type如果您正在寻找某个标签(不是某个 child ):

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

<p>hi</p>
<p>hello</p>
<p>bye</p>