CSS3专栏的第n个孩子

Question

我正在使用CSS3列,但我想分别控制每一列,以设置偶数/奇数列的不同背景.

我希望结果如下图所示:

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;
}

小提琴