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

CSS nth-child apply odd-even rule but switch every 4 items(CSS nth-child 应用奇偶规则,但每 4 项切换一次)
本文介绍了CSS nth-child 应用奇偶规则,但每 4 项切换一次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

I have a list of divs that appear 4 in a row with a class and I would like to create a checkerboard background style, meaning:

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

我试过了

.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 的事情头疼,如果我能做到这一点,瞧!

and it works fine for odd-even divs but cant get it to switch every 4 items. I'm headaching over the 4n-1, 4n+1 stuff, if I could get that right voila!

结果应该是这样的:

推荐答案

Demo

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

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

这篇关于CSS nth-child 应用奇偶规则,但每 4 项切换一次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to find a User ID from a Username in Discord.js?(如何从 Discord.js 中的用户名中查找用户 ID?)
Discord js reaction not detected(未检测到 Discord js 反应)
Joining a voice channel on ready (discord.js)(准备好加入语音频道(discord.js))
Cannot read properties of undefined when it shouldn#39;t be undefined in discord.js command handler(当不应该在 discord.js 命令处理程序中未定义时,无法读取未定义的属性)
Why messageReactionAdd do nothing discord.js(为什么 messageReactionAdd 什么都不做 discord.js)
How do I list all Members with a Role In Discord.Js(如何在 Discord.Js 中列出所有具有角色的成员)