Hintergrundfarbe nach verschachtelter Ebene änderbar?

Question

Ich habe eine geordnete Liste, die möglicherweise eine unendliche Anzahl von verschachtelten Listen haben kann. Ich versuche, die background-color jeder verschachtelten Liste dynamisch zu ändern, so dass es zunehmend dunkler wird, die Gruppierung jeder Liste viel einfacher zu verstehen.

So habe ich diese Grundstruktur (das unendlich fortgesetzt werden kann):

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

Gerade jetzt, kann ich diese mit so etwas wie dies erreichen:

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

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

Das gibt mir, was ich will, Es ist jedoch begrenzt in wie viele Ebenen ich verwenden kann und jede Ebene fügt mehr und mehr Daten zu meiner CSS-Datei hinzu, was zu längeren Ladezeiten führt.

Gibt es eine Möglichkeit, die Farbe mit einem einzelnen Selektor dynamisch festzulegen? Ich weiß, dass CSS3 einige neue CSS-Selektortricks hinzugefügt hat, aber ich kann nichts finden, was so etwas dokumentiert. Ich kann auch keinen Weg finden, einen Wert im Selektor dem Selektor selbst zuzuordnen.

Answer 1

Sortieren von. Es ist nicht genau das, wonach du suchst, aber durch die Verwendung von rgba für eine background-color kannst du eine ziemlich anständige Simulation machen, denke ich. http://jsfiddle.net/jRdQC/

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

die ‚Schicht‘ Hintergrundfarben und deshalb dunkler, wie Sie gehen.

Answer 2

Sie könnten den Baum mit Javascript analysieren, um die CSS-Belastung zu vermeiden. Sie werden zunächst eine Funktion für die Farbleuchtdichte benötigen:

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; 
} 

Und dann würden Sie eine dunklere Farbe auf der verschachtelten Ebene auf Basis anwenden müssen. Hier

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); 
}); 

ist die Geige: http://jsfiddle.net/dDUaF/1/

Sie können die Farbe dunkler machen, indem die Dezimalstelle in der darken_ratio Variable zu erhöhen. Dies funktioniert auch mit einer beliebigen Farbe in Hex. Zum Beispiel: http://jsfiddle.net/dDUaF/4/