CSS nth-child 应用奇偶规则，但每 4 项切换一次答案

【问题标题】：CSS nth-child apply odd-even rule but switch every 4 itemsCSS nth-child 应用奇偶规则，但每 4 项切换一次
【发布时间】：2021-07-20 16:55:31
【问题描述】：

我有一个divs 列表，它与一个类连续出现 4 个，我想创建一个棋盘背景样式，意思是：

为奇数和偶数应用不同的背景颜色divs
将每行的奇偶切换为奇偶

我试过了

.boxwrapper:nth-child(2n-1), .boxwrapper:nth-child(2n) {
    background:#ff0000;
}
.boxwrapper:nth-child(4n-2), .boxwrapper:nth-child(4n-3) {
    background:#0000ff;
}

它适用于奇偶 div，但不能让它每 4 个项目切换一次。我正在为 4n-1、4n+1 的东西头疼，如果我能做到这一点，瞧！

结果应该是这样的：

【问题讨论】：

抱歉，忘记了我原来帖子中的代码。现在更新了！

标签： css css-selectors

【解决方案1】：

演示

http://jsfiddle.net/mykhA/1/

HTML

<div class="container">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

CSS

.container {
    width: 100px;
    height: 100px;
}

.line {
    width: 100px;
    height: 25px;
}

.box {
    width: 25px;
    height: 25px;
    float: left;
}

.box:nth-child(8n+2) {
    background-color: red;
}

.box:nth-child(8n+4) {
    background-color: red;
}
.box:nth-child(8n+5) {
    background-color: red;
}

.box:nth-child(8n+7) {
    background-color: red;
}

.box:nth-child(8n+1) {
    background-color: blue;
}

.box:nth-child(8n+3) {
    background-color: blue;
}

.box:nth-child(8n+6) {
    background-color: blue;
}

.box:nth-child(8n) {
    background-color: blue;
}

【讨论】：

我明白你的意思，但我不知道我是否可以添加
每 4 个元素。 div 实际上是记录集的结果，并且是动态填充的。
我编辑了我的帖子，所以现在它可以在没有额外标记的情况下使用 jsfiddle.net/mykhA/1
谢谢，我试图让元素只有 2 种样式，但现在我发现我需要更多。确实，简单总是最好的方法！

【解决方案2】：

在@Miszy 的解决方案之后，我还找到了一个jQuery 解决方案，无论页面上会出现多少个div，它都会做同样的事情：

$(document).ready(function() {
    $(.boxwrapper:nth-child(8n+3), .boxwrapper:nth-child(8n+5), .boxwrapper:nth-child(8n+8), .boxwrapper:nth-child(8n+10)").css({"background-color":"red"});
});

任何一个都可以正常工作。

【讨论】：

【解决方案3】：

您也可以只使用 4 个选择器来切换背景颜色。（答案类似于@MichałMiszczyszyn => 更短的方法）

重复模式在 2 行 4 个元素上进行，:nth-child(8n) 的选择确实是要处理的基本模式，例如：

:nth-child(8n-1),
:nth-child(8n-3),
:nth-child(8n-6),
:nth-child(8n-12){
background:/* switch to the other value here */;
}

.square {
  width:25%;
  margin:auto;
  background:turquoise;
  counter-reset:div;
  overflow:hidden; /* to deal with float */
}

.square div {
  float:left;
  width:25%;
  text-align:center;
  background:green;
}
.square div:nth-child(8n-1),
.square div:nth-child(8n-3),
.square div:nth-child(8n-6),
.square div:nth-child(8n-12){
background:tomato;
}

/* demo purpose */
body:hover div div {
background:initial;/* resets to none to show parents background */
}
.square div:before {
  content:'';
  padding-top:100%;
  display:inline-block;
  vertical-align:middle;
}
.square div:after {
  counter-increment:div;
  content:counter(div);
  display:inline-block;
  vertical-align:middle;
  font-size:2vw;
}

<div class="square">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<hr/>
<div class="square">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

模式将每 8 个元素重复一次。

请注意，您可以保留最初的background-color 正方形并使用父背景。

【讨论】：

【解决方案4】：

这是一个响应版本的 css 棋盘格（damier），从每线 1 个到每行 5 个。

http://jsfiddle.net/Choufourax/pb09o5fa/1/

CSS

div.grid {
  display: grid;
}
div.grid > div {
    color: red;
    height: 200px;
    background-color: gray;
    /* comment these 3 lines if you don't need to center content */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Default => 1 per ligne */
@media only screen and (max-width: 600px)   {
  
  div.grid > div:nth-child(odd) {
    background-color: black;
  }
}

/* 50%  => 2 per ligne */
@media only screen and (max-width: 840px) and (min-width: 600px)  {
  div.grid {
   grid-template-columns: 1fr 1fr; 
  }
  div.grid > div:nth-child(4n+1), div.grid > div:nth-child(4n+4) {
    background-color: black;
  }
}

/* 33%  => 3 per ligne */
@media only screen and (max-width: 1024px) and (min-width: 840px)  {
  div.grid {
   grid-template-columns: 1fr 1fr 1fr; 
  }
  div.grid > div:nth-child(6n+1), div.grid > div:nth-child(6n+3), div.grid > div:nth-child(6n+5)  {
    background-color: black;
  }
}

/* 25% => 4 per ligne */ 
@media only screen and (max-width: 1140px) and (min-width: 1024px)  {
  div.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr; 
  }
  div.grid > div:nth-child(8n+1), div.grid > div:nth-child(8n+3), div.grid > div:nth-child(8n+6), div.grid > div:nth-child(8n+8) {
    background-color: black;
  }
}

/* 20% => 5 per ligne */ 
@media only screen and (min-width: 1141px)  {
  div.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  }
  div.grid > div:nth-child(10n+1), div.grid > div:nth-child(10n+3), div.grid > div:nth-child(10n+5), div.grid > div:nth-child(10n+7), div.grid > div:nth-child(10n+9) {
    background-color: black;
  }
}

HTML：

<div class="grid">
    <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>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>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>

【讨论】：