在CSS中每隔一个子层着色一次

Coloring every second sub-layer in CSS

本文关键字：子层 一次 一个 CSS      更新时间：2023-09-26

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

所以我的问题是：如何在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……如果我想使用更多的子层）

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

colorList($('div > ul'));
function colorList($ul) {
    $ul.css({'backgroundColor': 'red'});
    var $nextElement = $ul.find('> ul > ul');
    if($nextElement.length) {
        colorList($nextElement);
    }
}
相关文章：