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

在 CSS 中每隔一个子层着色

Coloring every second sub-layer in CSS

html

javascript

css

parent-child

css-selectors