在CSS

Question

我正在使用包含层次结构的白板应用。

所以我的问题是：如何在CSS中（或者如果需要js）为每个第二个子层着色？

示例stying

＆＃13;

＆＃13;

ul {
  width: 256px;
  min-height: 64px;
  padding: 16px 0 16px 16px;
  background-color: blue;
}
/*FOLLOWING SHALL BE REPLACED BY AN SELECTOR OR JS-ALGORITHM*/

div>ul>ul,
div>ul>ul>ul>ul,
div>ul>ul>ul>ul>ul>ul,
div>ul>ul>ul>ul>ul>ul>ul>ul {
  background-color: red;
}

＆＃13;

<div>
  <ul>
    <ul>
      <ul>
        <ul>
          <ul>
            <ul>
            </ul>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

我想要着色的是第2行和第4行中的div（依此类推：6,8,10，......如果我可以使用更多的子图层）

Answer 1

没有CSS选择器。但是，您可以使用JavaScript（jQuery）中的递归函数来实现它：

colorList($('div > ul'));

function colorList($ul) {
    $ul.css({'backgroundColor': 'red'});

    var $nextElement = $ul.find('> ul > ul');
    if($nextElement.length) {
        colorList($nextElement);
    }
}