html - 模仿html中的备用行

Question

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

我需要的是一种即使在最后一个 div 之后也可以制作备用背景颜色的方法。Mac OS Finder 窗口的工作方式（是客户端的灵感）。

怎么做？除了笨拙的“创建空的div”之外，还有其他方法吗？

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

Answer 1

您最好的选择是使用背景图像或背景渐变来获取容器元素中的重复模式。

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

示例（视觉的 jSFiddle）：

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

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

Answer 2

如果您希望使用 CSS 执行此操作，并且您的列表 html 包含在标签中，您可以将类中的背景或背景颜色属性分配给该标签。（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 结构。