javascript - 在 CSS 中每隔一个子层着色

Question

我正在开发一个包含层次结构的白板应用。

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

样式样式

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

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

我的目标是为第 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);
    }
}