8

我有一个有序列表，它可能有无限数量的嵌套列表。我希望动态更改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 选择器技巧，但我找不到任何记录此类内容的内容。我也找不到使选择器中的值与选择器本身相对应的方法。

4

3 回答 3

23

有点。这不完全是您正在寻找的东西，但我认为通过使用rgbafor abackground-color您可以进行相当不错的模拟。http://jsfiddle.net/jRdQC/

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

背景颜色“图层”，因此随着您的移动而变暗。

于 2013-08-14T20:16:00.397 回答
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/

于 2013-08-14T20:18:53.073 回答
1

这是我采用的另一种可能的方法，现在我们可以在 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%))); */
  }
于 2021-03-04T12:50:34.337 回答