如何仅设置 div 中某些列的样式？

Question

我在一个整体容器中有一系列 div：

<div class="positionDivs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <!--this goes on for a unspecified number of times-->
</div>

这在主 div (positionDivs)

中显示为三列

我需要做的是在这个我已经完成的容器中每隔三分之一 div 设置样式：

.positionDivs div:nth-child(3n){
    background-color:black;
}

但我也（这是我无法解决的部分！）需要设置中心栏的样式。在上面的示例中，这将是数字 2、5 和 8。

有人可以帮忙吗？

Answer 1

使用3n+2

.positionDivs div:nth-child(3n+2){
   /* CSS Properties */
 }

或3n-1

.positionDivs div:nth-child(3n-1){
   /* CSS Properties */
 }

Answer 2

只需要从 select 之前的 div:

中减去一个

.positionDivs div:nth-child(3n-1){
    background-color:red;
}

jsFiddle example

Answer 3

在nth-child中使用3n+2。

.positionDivs div:nth-child(3n+2){
    background-color:red;
}

或3n-1，两者return结果相同。

.positionDivs div:nth-child(3n-1){
    background-color:red;
}

如何仅设置 div 中某些列的样式？

How can I style only certain columns in a div?

html

css

css-selectors