सीएसएस कंट्रोलिंग कैस्केड

Question

मैंने उपयोगकर्ताओं के उपयोग के लिए एक संपादक बनाया है, इसमें शैलियों का एक पैलेट है, इस उदाहरण के लिए हम इन .p1 और `.p2 'को कॉल करेंगे। मेरी समस्या यह है कि वे स्टाइल शीट में किस क्रम में दिखाई देते हैं, इस पर निर्भर करते हुए कि वे एक-दूसरे को ओवरराइड कर रहे हैं।

मुझे यह हल करने का कोई तरीका नहीं मिल रहा है, क्योंकि मुझे नहीं पता कि इन पैनलों को कैसे घोंसला जा सकता है।

यह उदाहरण काफी सरल है, और मैं बिल्कुल नियंत्रित नहीं कर सकता कि टैग की तरह चीजें कहां होंगी, उन्हें किसी भी गहराई पर टेबल, सूचियों, पैराग्राफ या किसी अन्य टैग में घोंसला लगाया जा सकता है। यह भी शीर्षकों और किसी भी अन्य बच्चे तत्वों है कि वहाँ शैली अनुकूलित (जैसे एच 1, उल ...) संदर्भ है कि यह में दिखाया गया है में अच्छा देखने की जरूरत है पर लागू होगा।

.p1 a { 
 
    color: red; 
 
} 
 
.p2 a { 
 
    color: green; 
 
}

<div class="pl p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="pl p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="pl p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="pl p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="pl p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="pl p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>

मैंने चारों ओर खेला है: चयनकर्ता नहीं, और सभी का भी उपयोग: डिफॉल्ट, बच्चों पर, लेकिन कोई भाग्य नहीं है।

Answer 1

आपका उदाहरण एक छोटे से भ्रामक है।

अगर मैं तुम्हें सही ढंग से समझ, आप चाहते हैं एक तत्व डोम में निकटतम पूर्वज द्वारा स्टाइल जाता है कि।

यदि ऐसा है, तो समाधान नियमों का एक सेट निर्धारित करना होगा, जहां पूर्वजों में से 2 वर्गों में से एक है, और इसलिए उच्चतम विनिर्देश वाला नियम जीत जाएगा ....

क्षमा करें, लेकिन मैं इसे समझाने के लिए एक बेहतर तरीका नहीं मिल सकता है ...

.p1 a, 
 
*[class^=p] .p1 a, 
 
*[class^=p] *[class^=p] .p1 a, 
 
*[class^=p] *[class^=p] *[class^=p] .p1 a 
 
{ 
 
\t background-color: antiquewhite; 
 
} 
 

 
.p2 a, 
 
*[class^=p] .p2 a, 
 
*[class^=p] *[class^=p] .p2 a, 
 
*[class^=p] *[class^=p] *[class^=p] .p2 a 
 
{ 
 
\t background-color: lightblue; 
 
}

<div class="p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ऐसा लगता है कि आप जो खोज रहे हैं वह प्रत्यक्ष बच्चा चयनकर्ता > है। प्रत्यक्ष बच्चे चयनकर्ता on MDN के बारे में और जानें।

लाइव डेमो: क्योंकि यह एक ही तत्व के लिए लागू 2 वर्ग हैं

.p1 > a { 
 
    color: red; 
 
} 
 
.p2 > a { 
 
    color: green; 
 
}

<div class="pl p2"> 
 
    <a href="#">Hello 2</a> 
 
    <div class="pl p1"> 
 
    <a href="#">Hello 2-1</a> 
 
    <div class="pl p2"> 
 
     <a href="#">Hello 2-1-2</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="pl p1"> 
 
    <a href="#">Hello 1</a> 
 
    <div class="pl p2"> 
 
    <a href="#">Hello 1-2</a> 
 
    <div class="pl p1"> 
 
     <a href="#">Hello 1-2-1</a> 
 
    </div> 
 
    </div> 
 
</div>