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

Question

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

换句话说，在此示例中，第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完整列表）

选择器4提供了增强的 :nth-child()伪类，它可能能够完成这种斑马条纹。但这还没有准备好黄金时间。就目前而言，我会说完成目标的最简单的CSS方法…

我正在寻找在以下响应式Flexbox表中斑纹条纹行的最简单方法。

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

略微调整您的媒体查询，即可在不同的屏幕尺寸上使用斑马条纹。

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



/* NEW */

.stripe {

  background-color: black;

  color: white;

}



/* ADJUSTED */

@media all and (max-width: 500px) {

  .Rtable {  display: block; }

  .stripe { background-color: white; color: black; }

  .Rtable-cell:nth-child(even) { background-color: black; color: white;}

}


<div class="Rtable">



  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>

  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Ice</div>

  <div style="order:3;" class="Rtable-cell">No direwolf</div>

  <div style="order:4;" class="Rtable-cell stripe">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 stripe">Has a sword named Longclaw</div>

  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>

  <div style="order:4;" class="Rtable-cell stripe">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 stripe">Has a sword named Needle</div>

  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>

  <div style="order:4;" class="Rtable-cell stripe">Female</div>

  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>



</div>