根据嵌套级别更改背景颜色是否可行？

Question

我有一个有序列表，它可能有无限数量的嵌套列表。我想动态地改变每个嵌套列表的背景颜色，使其逐渐变暗，从而更容易理解每个列表的分组。

因此，我有这个基本结构（可以无限延伸）：

<ol class="top-level-list">
    <li>
        <ol>
            <li>
                <ol>
                    <li></li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

现在，我可以使用以下类似的方法来完成这个任务：

.top-level-list li ol li ol li {
    background: #D4D4D4;
}

.top-level-list li ol li ol li ol li{
    background: #C7C7C7;
}

这给了我我想要的东西，但是它在可以使用的层级上有限制，每个层级都会向我的CSS文件中添加越来越多的数据，导致加载时间变长。

有没有一种方法可以使用单个选择器动态设置颜色？我知道CSS3添加了一些新的CSS选择器技巧，但我找不到任何文档记录这样的东西。也找不到一种使选择器中的值对应于选择器本身的方法。

- Josh

---

很难相信几个CSS规则会显著影响您的加载时间，但如果您真的很担心，可以从选择器中省略“ol”--它们不是必需的。 - fred02138

你尝试过使用JavaScript来改变CSS属性吗？只需获取背景并添加一些十六进制值即可编程生成颜色，这并不太难。 - Joshua

下一个 li 应该有多少 暗度？这种计算需要使用 JavaScript。 - Hashem Qolami

@HashemQolami 我也是这么想的，但我想确认一下。我不确定CSS3是否添加了任何可以自行完成此操作的功能。如果需要，我可以使用JS，显然。我只是认为如果可以在纯CSS中完成会更好。 - Josh

我所知道的唯一方法就是@Tim提到的。 - Hashem Qolami

Answer 1

有点类似。虽然不完全符合您的要求，但是通过在background-color中使用rgba，我想您可以做出相当不错的模拟效果。请参考http://jsfiddle.net/jRdQC/

.top-level-list ol {
    background-color:rgba(0,0,0,.2);
}

背景色会形成一个'层次'，随着你往下滚动会变得越来越深。

- Tim Wasson

---

最好在父元素.top-level-list上设置默认的background-color: white。 - Hashem Qolami

这很优雅。在我的情况下不起作用，因为每个OL还有一个背景颜色，但我可以考虑重新设计GUI来摆脱它。无论如何，这是一个很棒的想法。我给你点赞。 - Josh

我稍微重新设计了用户界面，去掉了OLs的背景，最终效果正是我所期望的。感谢您的建议。 - Josh

谢谢。我觉得你的回答很好。：^） - sectus

Answer 2

这里是另一种可能的方法，我采用了这种方法，现在我们可以在CSS中使用calc和var。尚未在IE或Safari上进行测试，但看起来在Firefox中可以工作，并且在Chrome中可以达到15级（似乎这可能是实现问题）。

• Does not use Javascript

• Does not require that elements to modify have transparency between them

• Allows for using the variable for other things like changing the hue (see commented line), borders, text, etc.

    :root {
      --levelCount1: 0;
      --levelCount2: 0;
    }
  
    ol {
      padding: 1em;
  
      --levelCount1: calc(var(--levelCount2) + 1);
    }
  
    li {
      border: 1px solid blue;
  
      --levelCount2: calc(var(--levelCount1));
      /* provides fallback for once if/when vars are no longer usable */
      background-color: hsl(20, 40%, 90%);
      background-color: hsl(200, 40%, calc(90% - ((var(--levelCount1) * 4) * 1%)));
      /*background-color: hsl(calc(var(--levelCount1) * 208), 40%, calc(90% - ((var(--levelCount1) * 4) * 1%))); */
    }
  

- snydergd

Answer 3

你可以使用JavaScript解析树来避免CSS的负担。你首先需要一个颜色明度的函数：

function luminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
    }
    lum = lum || 0;
    // convert to decimal and change luminosity
    var rgb = "#", c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i*2,2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00"+c).substr(c.length);
    }
    return rgb;
}

然后您需要根据嵌套级别应用较深的颜色。

var color = '#efefef';

// You could also get the styled color by using:
// var color = $('.class-goes-here').css('background-color');

$('ol').each(function() {
    var depth = $(this).parents('ol').length;
    var darken_ratio = depth * .1;

    var darker_color = luminance(color, -darken_ratio);

    $(this).css('background-color', darker_color);
});

这里有一个样例: http://jsfiddle.net/dDUaF/1/ 你可以通过增加 darken_ratio 变量中的十进制数字使颜色变暗。这适用于任何十六进制颜色。例如: http://jsfiddle.net/dDUaF/4/

- Matthew R.

---

这个很有效。它完全满足我的需求，但有些列表可能会变得非常深和非常大，所以我会尽可能避免使用JS方法。感谢您的答案，我可以看到其他情况下可能也会有用。 - Josh