剥离带有包装物品的弹性桌子的斑马

Question

我正在寻找最简单的方法来斑马条纹下面的响应式flexbox表上的行.

换句话说,在这个例子中,第2行和第4行,但无限制,我不知道会有多少行,因为这是CMS系统中的可重用组件.

HTML无法更改,但行数和列数将经常更改.我很高兴为列设置限制而不是行.

有没有办法在纯CSS中做到这一点？

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

.Rtable-cell {
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;
}

h3 { margin: 0; }

@media all and (max-width: 500px) {
  .Rtable {
    display: block;
  }
}

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

Answer 1

理想情况下，您想要的选择器将针对属性中包含的偶数值style。像这样的东西：

.Rtable > div[style*="order"][style*={even}] { ... }

基本上，这个幻想选择器说：以包含( ) 值“order”和偶数的样式属性定位所有 div*。

它可以简化为：

.Rtable > div[style*={even}] { ... }

但据我所知，这种 CSS 魔法并不存在。（CSS 选择器 3 完整列表）

Selectors 4提供了一个增强的:nth-child()伪类，它也许能够完成这样的斑马条纹。但这还没有准备好迎接黄金时段。

现在，我会说实现你的目标的最简单的 CSS 方法......

我正在寻找在下面的响应式弹性盒表中斑马条纹行的最简单方法。

...将向每个具有偶数值的元素添加一个类order。

通过对媒体查询进行轻微调整，斑马条纹可以在不同的屏幕尺寸上工作。

.Rtable > div[style*="order"][style*={even}] { ... }

.Rtable > div[style*={even}] { ... }

JSFiddle演示