使用 CSS 的斑马条纹
爱宰
我正在尝试实现以下条纹图案，但第 n 个孩子的组合都没有奏效。实现这一目标的任何建议/解决方案。
VXP
你可以这样做：
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 50%;
height: 25px;
background: #7F7F7F;
}
.child:nth-child(4n+1),
.child:nth-child(4n+4) {
background: #FF0080;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>点是经过多少看到div 元件（.child）的方式反复进行，这是第一个数字或4n，然后只设置在第一和第四是相同的颜色与所述的+1和+4。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
不适用于斑马条纹数据表的已排序cols的CSS
- 2
xml jQuery解析后，tr：nth-child css斑马条纹
- 3
为什么在使用等渗线进行分析时斑马条纹如此糟糕？
- 4
使用flex-wrap：wrap在flex容器中的斑马条纹行
- 5
jQuery：斑马条纹表
- 6
如何使用TAL创建斑马纹CSS？
- 7
斑马条纹忽略了隐藏的元素
- 8
斑马条纹-Tablesorter vs Sieve
- 9
如何使用CSS制作两色条纹？
- 10
ztable R包，无法获得斑马条纹
- 11
Bootsrap“斑马条纹”表类不起作用
- 12
RecycledView小部件行上的斑马条纹颜色效果
- 13
带有隐藏行的表的AngularJS斑马条纹
- 14
如何在高图轴上实现“斑马条纹”
- 15
Bootsrap“斑马条纹”表类不起作用
- 16
rich：dataTable带有CSS的斑马细胞
- 17
如果绑定，Bootstrap CSS表条纹无法与剔除一起使用
- 18
div上的CSS背景条纹
- 19
如何在R中的数据表DT中添加行边框和斑马条纹（行条纹）？
- 20
使用SwiftUI进行条纹
- 21
CSS中的条纹元素样式设置
- 22
CSS渐变背景条纹而非平滑渐变
- 23
CSS仅2个条纹背景（倾斜）
- 24
CSS 动画条纹不起作用
- 25
使用React JS进行条纹
- 26
如何使用 Jinja2 在 dicts 上获得斑马样式？
- 27
使用OpenCV进行条纹布检测
- 28
在Android中使用令牌的条纹卡ID
- 29
使用openCV2去除水平条纹
我来说两句