Question

我试图为每个偶数DIV添加不同的样式，只要它不能被3整除。所以第二个div得到填充，第四个div得到填充，但第六个跳过了。这只能用CSS吗？

我这样做的原因是我从两列网格捕捉到桌面上的三列网格，我需要覆盖移动样式。

我不想使用JavaScript。

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>


@include breakpoint(mobile-wide) {
    width: calc((2.5 / 6 * 100%) - 0rem + (2.5 / 6 * 0rem))
    float: left;
    margin-right: calc((0.5 / 6 * 100%) + 0rem + (0.5 / 6 * 0rem));
    &:nth-child(2n) {
      margin-right: 0;
      float: right;
}

@include breakpoint(desktop) {
    width: calc((3 / 12 * 100%) - 0rem + (3 / 12 * 0rem));
    float: left;
    margin-right: calc((1.5 / 12 * 100%) + 0rem + (1.5 / 12 * 0rem));
    &:nth-child(3){
     margin-right: 0;
     float: right;
    }
}

Answer 1

您可以使用:not()

排除那些使用:nth-child(3n+3)选择器的人

＆＃13;

div:nth-child(even):not(:nth-child(3n+3)) {
  padding-left: 30px;
}

＆＃13;

<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>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>

＆＃13;

Answer 2

你走了：

Fiddle

这可以通过:not CSS选择器实现，如下所示：

li:nth-child(2n):not(:nth-child(3n))

这会产生您正在寻找的结果。

Answer 3

为每个偶数元素添加padding规则，并将填充重置为每个第六个元素。无需复杂化。

见这里：http://jsfiddle.net/cjvk8z6u/

Answer 4

嗯，这很简单。您想要选择以下序列：

2, 4, 8, 10, 14, 16, ...

注意任何模式？再试一次：

2, 8, 14, ...
4, 10, 16, ...

这转化为两个序列：从2和4开始，间隙为6;这些可以用nth-child选择器表示如下：

＆＃13;

div {
  font: medium monospace;
}
div:nth-child(6n + 2),
div:nth-child(6n + 4) {
  background: #FC0;
}

＆＃13;

<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>
<div>10*</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14*</div>
<div>15</div>
<div>16*</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20*</div>

＆＃13;

CSS：n-child（偶数）但不能被3整除

4 个答案: