Có thể thay đổi màu nền theo cấp độ lồng nhau không?

Question

Tôi có một danh sách có thứ tự có khả năng có số lượng danh sách lồng nhau vô hạn. Tôi đang tìm cách tự động thay đổi background-color của mỗi danh sách lồng nhau để nó dần dần trở nên tối hơn, giúp việc nhóm các danh sách dễ hiểu hơn nhiều.

Vì vậy, tôi có cấu trúc cơ bản này (có thể tiếp tục vô hạn):

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

Ngay bây giờ, tôi có thể thực hiện điều này bằng một cái gì đó như thế này:

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

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

Đó mang lại cho tôi những gì tôi muốn, nhưng nó bị giới hạn ở mức độ mà tôi có thể sử dụng và mỗi cấp độ càng thêm nhiều dữ liệu vào tệp CSS của tôi, dẫn đến thời gian tải lâu hơn.

Có cách nào để tự động đặt màu bằng một bộ chọn không? Tôi biết CSS3 đã thêm một số thủ thuật chọn CSS mới, nhưng tôi không thể tìm thấy bất kỳ tài liệu nào như thế này. Tôi cũng không thể tìm cách tạo giá trị trong bộ chọn tương ứng với chính bộ chọn.

Answer 1

Sắp xếp. Nó không chính xác những gì bạn đang tìm kiếm, nhưng bằng cách sử dụng rgba cho một background-color bạn có thể làm một mô phỏng khá phong nha, tôi nghĩ. http://jsfiddle.net/jRdQC/

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

Lớp màu nền 'và do đó trở nên tối hơn khi bạn đi.

Answer 2

Bạn có thể phân tích cú pháp cây bằng javascript để tránh gánh nặng CSS. Trước tiên, bạn cần có chức năng cho độ sáng màu:

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

Và sau đó bạn sẽ phải áp dụng màu tối hơn dựa trên mức lồng nhau.

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

Đây là fiddle: http://jsfiddle.net/dDUaF/1/

Bạn có thể tận dụng tối hơn màu bằng cách tăng số thập phân trong biến darken_ratio. Điều này cũng sẽ làm việc với bất kỳ màu nào trong hex. Ví dụ: http://jsfiddle.net/dDUaF/4/