模仿 html 中的交替行

Question

我有一个网站，其中显示了 <div> 的列表。 <div> 具有基于 :nth-child(odd) 和 :nth-child(even) 的备用背景颜色。完全没问题。

我需要的是一种即使在最后一个 div 之后也能制作备用背景色的方法。 Mac OS Finder Window 的工作原理（是客户的灵感）。

怎么做？除了笨重的 "create empty divs" 之外还有什么办法吗？

mac 文件夹在列表视图中的图像：

Answer 1

最好的办法是使用背景图像或背景渐变来获得容器元素中的重复图案。

缺点是如果交替的 div 具有不同的高度。

示例 (jSFiddle for visual):

#container{
   background-image: -webkit-repeating-linear-gradient( 90deg, 
    lightgray,
    lightgray 10px,
    white 10px,
    white 20px
  );
}

尝试使用不同的单位（即 EM 而不是像素）进行试验，您应该能够获得接近 Finder 背景的效果。请注意，您可能需要使用供应商前缀来实现浏览器兼容性。

Answer 2

如果您希望使用 CSS 执行此操作并且您的列表 html 包含在标签中，您可以在 [=30] 中分配背景或背景颜色属性 =] 到那个标签。 (JSFiddle).

HTML

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

li:nth-child(odd) {
    color: white;
    list-style: none;
    background-color: blue;
    margin-left: -40px;
}
li:nth-child(even) {
    color: white;
    list-style: none;
    background-color: gray;
    margin-left: -40px;
}
.list {
    padding-bottom: 18px;
    background: gray;
}

如果您的列表没有包含在 UL 标签中，那么您可能需要重新考虑您的 html 结构。

模仿 html 中的交替行

Mimic alternate row in html

html

css

rows

alternate