नेस्टेड स्तर के अनुसार पृष्ठभूमि रंग बदलना संभव है?

Question

मेरे पास एक आदेशित सूची है जिसमें संभावित रूप से असीमित सूचियों की असीमित मात्रा हो सकती है। मैं प्रत्येक नेस्टेड सूची के background-color को गतिशील रूप से बदलना चाहता हूं ताकि यह प्रगतिशील रूप से गहरा हो जाए, जिससे प्रत्येक सूची को समूहीकृत करना आसान हो जाता है।

तो मैं इस बुनियादी संरचना है (कि असीम जारी रख सकते हैं): अभी

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

, मैं यह कुछ का उपयोग कर इस तरह पूरा कर सकते हैं:

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

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

जो मुझे देता है मैं क्या चाहते हैं, लेकिन यह सीमित है कि मैं कितने स्तर का उपयोग कर सकता हूं और प्रत्येक स्तर मेरी सीएसएस फ़ाइल में अधिक से अधिक डेटा जोड़ता है, जिसके परिणामस्वरूप अधिक लोड समय होता है।

क्या एक ही चयनकर्ता के साथ रंग गतिशील रूप से सेट करने का कोई तरीका है? मुझे पता है कि CSS3 ने कुछ नए सीएसएस चयनकर्ता चाल जोड़े हैं, लेकिन मुझे ऐसा कुछ दस्तावेज नहीं मिल रहा है। न ही चयनकर्ता में मूल्य बनाने के लिए मुझे चयनकर्ता का मूल्य मिल सकता है।

Answer 1

क्रमबद्ध करें। यह बिल्कुल ठीक नहीं है कि आप क्या खोज रहे हैं, लेकिन का उपयोग करके background-color के लिए आप एक सुंदर सभ्य सिमुलेशन कर सकते हैं, मुझे लगता है। http://jsfiddle.net/jRdQC/

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

पृष्ठभूमि रंग 'परत' और इसलिए गहरा मिल के रूप में तुम जाओ।

Answer 2

आप सीएसएस बोझ से बचने के लिए जावास्क्रिप्ट के साथ पेड़ को पार्स कर सकते हैं। आप पहली बार रंग चमक के लिए एक समारोह की आवश्यकता होगी:

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

और फिर आप नेस्ट किए गए स्तर के आधार पर एक गहरे रंग लागू करने के लिए होगा। http://jsfiddle.net/dDUaF/1/

आप darken_ratio चर में दशमलव में वृद्धि से रंग गहरा बना सकते हैं:

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

यहाँ बेला है। यह हेक्स में किसी भी रंग के साथ भी काम करेगा। उदाहरण के लिए: http://jsfiddle.net/dDUaF/4/