Question

我有一个有序列表，可能有无限量的嵌套列表。我希望动态更改每个嵌套列表的background-color，以便逐渐变暗，使每个列表的分组更容易理解。

所以我有这个基本结构（可以无限延续）：

<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选择器技巧，但我找不到任何记录这样的东西。我也找不到在选择器中使值对应于选择器本身的方法。

Answer 1

排序。这不完全是你想要的，但是通过rgba使用background-color你可以做一个相当不错的模拟，我想。 http://jsfiddle.net/jRdQC/

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

背景颜色“图层”因此随着时间变暗。

Answer 2

您可以使用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/

Answer 3

这里是，我使用它，现在我们可以在 CSS 中使用 calc 和 var。尚未在 IE 或 Safari 中进行测试，但看起来它在 Firefox 中有效，在 Chrome 中最多可达到 15 个级别（似乎这可能是一个实现问题）。

不使用 Javascript
不要求被修改的元素在它们之间具有透明度

允许将该变量用于其他用途，例如更改色调（请参阅注释行）、边框、文本等。

  :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%))); */
  }

可以根据嵌套级别更改背景颜色吗？

3 个答案: