Javascript 彩色元素

我有多行相等的元素，我正试图为它们做国际象棋背景安排

例如：

正文{
最大宽度：600px；
}
文章{
宽度：100px；
高度：100px；
显示：内联块；
利润率：20px；
}
第条：第n名儿童（第2n名）{
背景颜色：橙色；
}
第条：第n个子女（2n+1）{
背景颜色：蓝色；
}
第N条儿童（2n+5）{
背景颜色：橙色；
}
第N条儿童（2n+6）{
背景颜色：蓝色；
}
第条：第n个子女（2n+10）{
背景颜色：橙色；
}
第N条儿童（2n+9）{
背景颜色：蓝色；
}

---

我想您应该看看奇偶伪类：

article:nth-child(odd)
article:nth-child(even)

更新#1:以偶数元素为例工作，并且不丢失具有响应能力的国际象棋模式（需要JS）——将其全屏打开以触发窗口大小调整事件

函数GetNumberOfItemsError（列表）{ var计数器=0； var firstRowOffsetTop=列表[0]。offsetTop； list.forEach（函数（平方）{ if（square.offsetTop==firstRowOffsetTop）{ 计数器+=1； } }); 返回计数器； } 函数RemovePreviousColor（列表）{ list.forEach（函数（平方）{ square.className=''； }); } 函数chessColorize（）{ var squares=document.queryselectoral（'li'）； var itemsPerRow=getNumberOfItemsPerRow（平方）； var classToAdd； var oddLine=true； 去除以前的颜色（方块）； 平方。forEach（函数（平方，索引）{ 如果（项目箭头%2）{ classToAdd=索引%2？'color1'：'color2'； }否则{ 如果（oddLine）{ classToAdd=索引%2？'color1'：'color2'； }否则{ classToAdd=索引%2？'color2'：'color1'； } } 如果（（索引+1）%ItemsError==0）{ oddLine=！oddLine； } square.classList.add（classToAdd）； }); } chessColorize（）； window.addEventListener（'resize'，chesColor'）

ul{
列表样式：无；
}
李{
宽度：100px；
高度：100px；
背景颜色：蓝色；
显示：内联块；
}
李：第n个孩子（偶数）{
背景颜色：橙色；
}
li.1{
背景色：红色；
}
li.2{
背景颜色：绿色；
}

基于此，我更改了您的代码片段，请使用

@media

作为三、二和一列

正文{
最大宽度：600px；
}
文章{
宽度：100px；
高度：100px；
显示：内联块；
利润率：20px；
}
文章{
背景颜色：橙色；
}
第N条子女（-2n+4），
第N条子女（4）~第N条子女（-2n+7），
第N条子女（8）~第N条子女（-2n+12），
第N条子女（24）~第N条子女（-2n+31），
第N条子女（32）~第N条子女（-2n+40），
第N条子女（40）~第N条子女（-2n+47），
第N条子女（48）~第N条子女（-2n+56），
第N条儿童（56）~第N条儿童（-2n+63）{
背景颜色：蓝色；
}

---

下面是一个使用第n个孩子（奇数）和第n个孩子（新）的简单示例：

div>div{
显示：内联块；
高度：100px；
宽度：100px；
}
div>div:n个子项（奇数）{
背景颜色：灰色；
}
div>div:n个子项（偶数）{
背景色：黑色；
}

当一行在偶数元素后中断时，图案不再像棋盘一样。有没有机会根据OP的标题做出响应？@le_m刚刚用一个可行的JS解决方案更新了我以前的答案