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”和偶数。

可以简化为：

.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

如果我找到了你的意思，你的意思是你想要在2号，4号......上的斑马条纹行

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

对于要将过程重复为无限制的情况，您必须使用SASS之类的预处理器或使用JAVASCRIPT。否则，css中唯一的选择就是准确知道必须对哪些行进行条带化。

Answer 3

您没有指定必须为无限列进行缩放，只有无限行，因此每列可以选择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：

    /* 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;
    }

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

3 个答案: