Question

我有一个div，而div中有很多H3元素。

对于每个H3元素（有任意数量），背景颜色要比之前的H3浅X色。

我被困在两件事上。

1：我如何单独使用CSS（可能会在haQuery中使用hacky方法完成此操作）。 2：我如何增加/减少颜色（为简单起见，假设第一个H3为黑色，其余为浅灰色）。

Answer 1

不幸的是，没有办法在CSS中做这样的事情（你可能能够对nth-of-type做一些事情），但这只有在<h3>时才有效页面上的元素位于同一个父元素中，如果您提前知道将会有多少元素，或者至少有多少元素

但它在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)
    +")";
}

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

1 个答案: