CSS Nth-Child方格

标签 css css-selectors

<分区>

我正在尝试使用第 nth-child 来更改 div 的背景颜色。下面是我想如何更改背景颜色的图像。我将如何处理第 n 个 child ?

enter image description here

每个框的宽度应为其父容器的 25%。

最佳答案

由于它是 8 个元素的重复模式,您可以使用它来创建 CSS:

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n) {
    background-color:black
}
div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
    background-color:gray
}

fiddle :http://jsfiddle.net/RvbsL/2/

关于CSS Nth-Child方格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23394734/

相关文章:

javascript - 无法更改 <SideNav> 的背景颜色

jquery - 如何将自定义 CSS 类添加到 Astra Theme for Wordpress 的主菜单按钮

html - br :last-child not working when an element is after the br

html - 具有显示表格单元格 css 属性的元素内 "cover"背景上的奇怪边框 - Chrome

html - Bootstrap 在大屏幕上将导航栏移动到其他 div 下方

css - 为什么是:last-child doesn't work when we have more elements inside?

css - 我如何让 CSS 类的优先级受到 "more closely"里面的哪个类的影响?

html - 未应用 HTML5 "article"标记上的第一个子项和第 n 个子项选择器

php - wordpress PHP 相关帖子 上子

html - 强制水平列表 100% 宽度