在html中模仿交替行

Question

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

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

怎么做？有什么方法除了笨重的＆＃34;创造空的divs＆＃34;？

列表视图中的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包含在标记中，则可以在类中为该标记指定背景或背景颜色属性。 （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结构。