我正在寻找最简单的方法来斑马条纹下面的响应式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>
解决方法
理想情况下,您想要的选择器将定位样式属性中包含的偶数值.像这样的东西：
.Rtable > div[style*="order"][style*={even}] { ... }
基本上,这个幻想选择器说：使用包含(*)值“order”和偶数的样式属性来定位所有div.
它可以简化为：
.Rtable > div[style*={even}] { ... }
但据我所知,这种CSS魔法并不存在. (CSS Selectors 3 complete list)
Selectors 4提供增强型:nth-child() pseudo-class,可以完成这种斑马条纹.但这还没有准备好迎接黄金时段.
现在,我会说最简单的CSS方法来实现你的目标……
I am looking for the simplest way to zebra stripe rows in the following responsive flexBox table.
…将为具有偶数订单值的每个元素添加一个类.
通过对媒体查询稍作调整,斑马条纹可以在不同的屏幕尺寸上工作.
.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>
