如何仅使用一行css将第二和第三个元素与第n个子元素对齐？

Question

我想在我的div中使用第n个子元素的第二个和第三个元素，但我只想用一行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>

有没有办法使用第n个孩子选择的目标两者兼而有之？

Answer 1

您可以用逗号两个选择结合起来：

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; } 

或者，如果你真的想要做的是什么风格的F IRST，并从内部段最后一段不同的，你能做到这一点明确：

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

Answer 2

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

或者您也可以通过指定像范围缩小选择：

JS Fiddle

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