html - 可以根据序列中的索引为元素的背景着色吗？

Question

我有一个div，div里面有很多H3元素。

对于每个 H3 元素(有任意数量)，背景颜色比它之前的 H3 浅 X 色度。

我坚持两件事。

1:我将如何单独使用 CSS 来完成此操作(可能会想出一种 hacky 方式在 jQuery 中完成此操作)。2:我如何增加/减少颜色(为简单起见，假设第一个 H3 为黑色，其余所有浅灰色)。

Answer 1

不幸的是，没有办法在 CSS 中做这样的事情(你可能可以用 nth-of-type 做一些事情)，但这只有在唯一的 <h3> 时才有效。页面上的元素在同一个父元素中，如果你提前知道会有多少，或者至少有多少 max)

但在 JavaScript 中实际上非常简单:

var h3s = document.getElementsByTagName('h3'), l = h3s.length, den = Math.max(l-1,1),
    darkest = [0,0,0], lightest = [255,255,255], // R,G,B - adjust as needed
    step = [
        (lightest[0]-darkest[0])/den,
        (lightest[1]-darkest[1])/den,
        (lightest[2]-darkest[2])/den
    ], i;
for( i=0; i<l; i++) {
    h3s[i].style.color = "rgb("
        +Math.round(darkest[0]+step[0]*i)+","
        +Math.round(darkest[1]+step[1]*i)+","
        +Math.round(darkest[2]+step[2]*i)
    +")";
}