html - 如何仅使用一行 css 定位具有第 n 个子元素的第二个和第三个元素？

我想使用 nth-child 定位 div 中的第二个和第三个元素，但我只想使用一行 css 而不是两行。

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

<div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
</div>

有没有办法使用 nth-child 选择器来定位两者？

最佳答案

您可以通过 p 专门针对每个 nth-child 标签，并用逗号分隔。

或者您可以通过指定如下范围来减少选择器:

JS Fiddle

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