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财产吗？或者我可以使用任何JavaScript解决方案来获取任何单个列的选择器吗？

请提供您建议的解决方案。

提前谢谢

Answer 1

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

这样的事情：

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

Fiddle