javascript - CSS3 列的第 n 个子元素

Question

我正在使用 CSS3 columns但我想单独控制每一列以将不同的背景设置为偶数/奇数列。

我希望结果如图所示:

html内容:

<div id="content">
    content body text content body text content body text 
    content body text content body text content body text content body text
    content body text content body text content body text content body text
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
</div>

CSS:

#content {
   column-gap:25px;
   column-count:3;
}

我想使用类似的东西:

column:nth-child(even)
{
   background:#0000ff;
}

我可以使用CSS3 :nth-child吗？属性(property)？或者我可以使用任何 javascript 解决方案来获取任何单个列的选择器吗？

请给出您建议的解决方案。

提前致谢

Answer 1

为样式添加绝对定位的背景 block ..

是这样的:

#bg1 {
  position: absolute; 
  width:30%;
  height:100%;
  background-color:green;
  z-index:-1;
}

Fiddle