0

我正在尝试使用 PHP 和 CSS 实现以下目标：

1 0 1 0
0 1 0 1
1 0 1 0
0 1 0 1

使用单个类，所以 1 将是暗类，0 是亮类。

以下是我正在尝试创建的内容：

在此处输入图像描述

我已经设法使用 nth-child 选择器实现了这一点，但效果并不好，尤其是添加了更多。

我正在使用 WordPress，块的数量将基于自定义帖子类型下的帖子数量，目前有 20 个，但这会增加。

简化示例：

.wrap{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
}
.checker{
  background-color: rgba(43,55,140,.8);
}
.checker:nth-child(n+2):nth-child(even):nth-child(-n+4),
.checker:nth-child(n+5):nth-child(odd):nth-child(-n+8),
.checker:nth-child(n+9):nth-child(even):nth-child(-n+12){
  background-color: rgba(181,230,254,.8);
}
<div class="wrap">
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
</div>

任何帮助将不胜感激！

4

2 回答 2

0

也许实现这一点的最简单方法是在每 4 个 div 之后插入一个空元素。

这将允许您通过简单地使用来生成像棋盘一样的着色:nth-child(odd)

我不使用 PHP，但大概有一个可用的模运算符。代码可能如下所示：

if ($i % 5 == 0) {
   // Create empty element.
}

例子：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  width: 25%;
  padding-top: 25%;
  background: lightblue;
}

.container > div:nth-child(odd) {
  background: blue;
}

.container > .empty {
  width: 0;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
</div>

于 2020-04-20T12:05:36.873 回答
0

（在电话上，对没有代码的描述表示歉意）。

没有使用过 WordPress，但代码似乎没有指定每行固定数量的元素（因为您使用的是引导样式）。

现在，如果您知道每行的元素数量，那就很简单了，因为您可以非常简洁地进行 nth-child。

例如，假设每行有 4 个元素。那么8n、8n+1、8n+3、8n+6都是暗的，可以肉眼验证。

当然，在响应式中，我们不一定知道一行会有多宽。但！您正在使用引导程序样式，因此您确实知道（有警告），因为您知道例如从 col-md-4 切换到 col-xs-12 时的媒体查询。

所以，我的想法是为每个这样的断点设置一组第 n 个子规则。

编辑

一般来说，如果一行是 x 个元素宽，当元素/div 本身没有特定组织时，2x+y 规则是使用第 n 个子规则制作检查板的简单方法。

于 2020-04-20T12:13:17.880 回答