Zebra 使用包装项目对 flexbox 表进行条带化

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}] { ... }

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

可以简化为：

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

但据我所知，这种 CSS 魔法并不存在。 (CSS Selectors 3 complete list)

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

现在，我会说实现目标的最简单的 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>

JSFIDDLE DEMO

Answer 2

您没有指定它必须针对无限列进行缩放，只有无限行，因此您可以为每列设置 4 个规则来选择每个第二个单元格，即：

    /* 4(columns)*2(every second cell) = 8n */
    /* then repeat for each column (+1, +2 etc) */
    .Rtable-cell:nth-child(8n+1) {
        background-color: pink;
    }    
    .Rtable-cell:nth-child(8n+2) {
        background-color: pink;
    }    
    .Rtable-cell:nth-child(8n+3) {
        background-color: pink;
    }    
    .Rtable-cell:nth-child(8n+4) {
        background-color: pink;
    }    

如果您使用的是 LESS 之类的预处理器，则可以将其设为 mixin：

    /*
    .mxn-TableStripes(@n, @i: 1) when (@i =< @n) {
      @second-row: @n*2;
      @sel: ~"@{second-row}n + @{i}";
      .Rtable-cell:nth-child(@{sel}) {
        background-color: pink;
      }
      .mxn-TableStripes(@n, (@i + 1));
    }
    //Param is number of columns
    .mxn-TableStripes(4);
    */

Answer 3

如果我猜对了，你的意思是你想在数字 2、4、...上用斑马线划行

对于第二行斑马条纹，您必须更改背景颜色 2、5、7、... 所以答案是Rtable > div:nth-child(5n + 2) { background-color: #ccc; }。对于第 4 行，公式为 nth-child(5n + 4) 等等。

如果你想无限地重复这个过程，你必须使用像 SASS 这样的预处理器或使用 JAVASCRIPT。否则，css 中的唯一选择就是准确地知道哪些行必须被条带化。