Zebra 使用包装项目对 flexbox 表进行条带化

问题描述

我正在寻找最简单的方法来对以下响应式 flexbox 表上的行进行斑马条纹处理.

I am looking for the simplest way to zebra stripe the rows on the following responsive flexbox table.

换句话说，本例中的第 2 行和第 4 行，但没有限制，我不知道会有多少行，因为这是用于 CMS 系统中的可重用组件.

In other words, rows 2 and 4 in this example, but unlimited, I can't know how many rows there will be because this is for a reusable component in a CMS system.

HTML 不能更改，但行数和列数会经常更改.我很高兴对列而不是行设置限制.

The HTML cannot change but the number of rows and columns will change often. I am happy with setting a limit on columns but not rows.

有没有办法在纯 CSS 中做到这一点?

Is there any way to do it in pure 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>

推荐答案

理想情况下，您想要的选择器将针对 style 属性中包含的偶数值.像这样的:

Ideally, the selector you want would target the even values contained in the style attribute. Something like this:

.Rtable > div[style*="order"][style*={even}] { ... }

基本上，这个幻想选择器说:定位所有具有样式属性的 div，包含 (*) 值order"和偶数.

Basically, this fantasy selector says: target all divs with a style attribute that contains (*) the values "order" and an even number.

可以简化为:

.Rtable > div[style*={even}] { ... }

但据我所知，这种 CSS 魔法并不存在.(CSS 选择器 3 完整列表)

But this sort of CSS magic doesn't exist, to my knowledge. (CSS Selectors 3 complete list)

Selectors 4 提供了增强的 :nth-child() 伪类，这可能能够完成这样的斑马条纹.但这还没有准备好迎接黄金时段.

Selectors 4 offers an enhanced :nth-child() pseudo-class, which may be able to accomplish such zebra striping. But this isn't ready for prime time.

现在，我会说实现目标的最简单的 CSS 方法...

For now, I would say the simplest CSS method for accomplishing your goal...

我正在寻找在以下响应式 flexbox 表中对行进行斑马条纹的最简单方法.

I am looking for the simplest way to zebra stripe rows in the following responsive flexbox table.

... 将为每个元素添加一个类，并具有偶数的 order 值.

... would be to add a class to each element with an even order value.

对您的媒体查询稍作调整后，斑马条纹适用于不同的屏幕尺寸.

And with a slight adjustment to your media query, the zebra striping works on different screen sizes.

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

这篇关于Zebra 使用包装项目对 flexbox 表进行条带化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！