html – Zebra用包装物品剥离flexbox表

概述我正在寻找最简单的方法来斑马条纹下面的响应式flexbox表上的行. 换句话说,在这个例子中,第2行和第4行,但无限制,我不知道会有多少行,因为这是CMS系统中的可重用组件. HTML无法更改,但行数和列数将经常更改.我很高兴为列设置限制而不是行. 有没有办法在纯CSS中做到这一点？ .Rtable { display: flex; flex-wrap: wrap;}.Rtable- 我正在寻找最简单的方法来斑马条纹下面的响应式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 >  <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>

解决方法 理想情况下,您想要的选择器将定位样式属性中包含的偶数值.像这样的东西：

.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 >  <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>

JSFIDDLE DEMO

总结

以上是内存溢出为你收集整理的html – Zebra用包装物品剥离flexbox表全部内容，希望文章能够帮你解决html – Zebra用包装物品剥离flexbox表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。