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

Question

我想使用 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 选择器来定位两者？

Answer 1

您可以p按每个标签专门定位每个标签，nth-child并用逗号分隔。

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

JS小提琴

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

Answer 2

您可以使用逗号运算符来组合两个选择器：

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

另一种可能不太神秘的方法（取决于应用程序）是对突出显示的段落使用一个类：

<div>
    <p>One</p>
    <p class="important">Two</p>
    <p class="important">Three</p>
    <p>Four</p>
</div>

使用CSS：

p.important { color: red; }

或者，如果您真正想要做的是使第一个和最后一个段落的样式与内部段落不同，您可以明确地执行此操作：

p:not(:first-child):not(:last-child) { color: red; }