Można zmienić kolor tła zgodnie z poziomem zagnieżdżonym?

Question

Mam uporządkowaną listę, która potencjalnie może mieć nieskończoną liczbę zagnieżdżonych list. Szukam dynamicznej zmiany background-color każdej listy zagnieżdżonej, aby stopniowo stawała się ciemniejsza, dzięki czemu grupowanie każdej listy było łatwiejsze do zrozumienia.

Więc mam tę podstawową strukturę (które można kontynuować w nieskończoność):

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

Teraz można to osiągnąć za pomocą mniej więcej tak:

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

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

który daje mi to, co chcę, ale jest ograniczona na ile poziomów mogę użyć, a każdy poziom dodaje coraz więcej danych do mojego pliku CSS, co powoduje dłuższy czas ładowania.

Czy istnieje sposób na dynamiczne ustawianie koloru za pomocą jednego selektora? Wiem, że CSS3 dodał kilka nowych selektorowych selektorów CSS, ale nie mogę znaleźć niczego, co udokumentowałoby coś takiego. Nie mogę też znaleźć sposobu, aby wartość w selektorze odpowiadała samemu selektorowi.

Answer 1

Sortuj. Nie jest to dokładnie to, czego szukasz, ale używając rgba dla background-color możesz zrobić całkiem przyzwoitą symulację, tak myślę. http://jsfiddle.net/jRdQC/

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

Warstwa kolorów tła, dzięki czemu stają się coraz ciemniejsze.

Answer 2

Można analizować drzewo za pomocą javascript, aby uniknąć obciążenia CSS. trzeba najpierw funkcję luminancji dla kolorów:

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

I wtedy trzeba by zastosować ciemniejszy kolor na podstawie poziomu zagnieżdżonego.

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

Oto skrzypce: http://jsfiddle.net/dDUaF/1/

Można dokonać ciemniejszy kolor, zwiększając po przecinku w zmiennej darken_ratio. Będzie to również działać z dowolnym kolorem na heksie. Na przykład: http://jsfiddle.net/dDUaF/4/