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

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

理想情况下，所需的选择器将定位

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>