理想情况下，所需的选择器将定位
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; }.stripe { background-color: black; color: white;}@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 > <div ><h3>Eddard Stark</h3></div> <div >Has a sword named Ice</div> <div >No direwolf</div> <div >Male</div> <div ><strong>Lord of Winterfell</strong></div> <div ><h3>Jon Snow</h3></div> <div >Has a sword named Longclaw</div> <div >Direwolf: Ghost</div> <div >Male</div> <div ><strong>Knows nothing</strong></div> <div ><h3>Arya Stark</h3></div> <div >Has a sword named Needle</div> <div >Direwolf: Nymeria</div> <div >Female</div> <div ><strong>No one</strong></div></div>
