दिलचस्प पोस्ट
हार्ड डिस्क सीरियल नंबर प्राप्त करें '$ (दस्तावेज़) के non-jQuery समतुल्य क्या है .ready ()'? क्या मैं ScrollView के लिए ScrollListener कर सकता हूं? फ्रेगमेंट के लिए थीम सेट करें बिटमैप, बिटमैप। रीसायकल (), कमजोर संदर्भ और कचरा संग्रहण क्या एक विशिष्ट पंक्ति को अनदेखा कर सकते हैं? PHP वैरिएबल के रूप में जावा स्क्रिप्ट व्हेरिएबल का उपयोग कैसे कर सकता हूं? एक .NET सरणी के ऊपर? आवेदन तक प्रतीक्षा करें। गणना करें समाप्त हो गया है एमएस एक्सेल दुर्घटनाग्रस्त जब vba कोड रन एसक्लबफाल्ड क्या है और मुझे क्यों परवाह करना चाहिए? आईआईएस एक्सप्रेस को प्रोग्रामिंग शुरू करना और रोकना सफारी कुकी सेट नहीं करता लेकिन आईई / एफएफ करता है जावास्क्रिप्ट का उपयोग करते हुए बाइनरी फ़ाइल सामग्री को पुनः प्राप्त करना, बेस 64 इसे एनकोड करें और पायथन का उपयोग करके इसे रिवर्स-डीकोड करें पृष्ठ के ताज़ा करें को रोकने के लिए जब अंदर स्थित बटन पर क्लिक किया जाता है

मैं सीएसएस विरासत को कैसे रोकूं?

मेरे साइडबार में नेस्टेड सूचियों (<ul> और <li> टैग्स) का उपयोग करने वाले मेरे पास पदानुक्रमित नेविगेशन मेनू है। मैं एक पूर्व-निर्मित थीम का उपयोग कर रहा हूं, जो पहले से ही सूची आइटमों के लिए शैलियों में है, लेकिन मैं शीर्ष-स्तरीय आइटमों के लिए शैली को बदलना चाहता हूं लेकिन यह उप-मदों पर लागू नहीं होता है क्या उन शैलियों के बिना अपने बच्चों की सूची आइटमों को कैसकेड किए बिना शीर्ष-स्तरीय सूची आइटम टैग में शैलियों को लागू करने का एक आसान तरीका है? मैं समझता हूं कि मैं उप-मदों में स्पष्ट रूप से ओवरराइड शैलियों को जोड़ सकता हूं, लेकिन मैं वास्तव में उस सभी शैली कोड को डुप्लिकेट करने से बचाना चाहूंगा यदि कोई आसान तरीका अभी कहना है कि "इन वर्गों को इन वर्गों पर लागू करें और न कैस्केड करें उन्हें किसी भी बच्चे तत्वों के नीचे " यहाँ मैं उपयोग कर रहा हूँ html है:

<ul id="sidebar"> <li class="top-level-nav"> <span>HEADING 1</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> <li class="top-level-nav"> <span>HEADING 2</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> </ul> 

तो सीएसएस में पहले से ही "# साइडबार उल" और "# साइडबार उल ली" की शैलियों हैं, लेकिन मैं "# साइडबार .top-level-nav" पर अतिरिक्त शैलियों को जोड़ना चाहूंगा जो कि इसके उप-शख्सियों को कैस्केड न करें। क्या यह बस करने का कोई तरीका है या मुझे सभी शैलियों को फिर से व्यवस्थित करने की आवश्यकता है, इसलिए "# साइडबार उल" पर मौजूद शैलियों अब कुछ वर्गों के लिए विशिष्ट हैं

वेब के समाधान से एकत्रित समाधान "मैं सीएसएस विरासत को कैसे रोकूं?"

जैसा कि अभी तक कोई पैरेंट चयनकर्ता नहीं है (या शॉन इनम के रूप में उन्हें, योग्य चयनकर्ता कहते हैं), इसलिए आपको मूल सूची आइटमों पर शैलियों को ओवरराइड करने के लिए बाल सूची आइटम में शैलियों को लागू करना होगा।

कैस्केडिंग कैस्केडिंग स्टाइल शीट्स की पूरी तरह से है, इसलिए नाम।

आप या तो बाल चयनकर्ता का उपयोग करते हैं

तो का उपयोग कर

 #parent > child 

शैलियों को लागू करने के लिए केवल प्रथम स्तर के बच्चों को ही लागू किया जाएगा दुर्भाग्य से आईआई 6 बाल चयनकर्ता का समर्थन नहीं करता है।

अन्यथा आप उपयोग कर सकते हैं

 #parent child child 

नीचे एक से अधिक स्तर वाले बच्चों को एक और विशिष्ट शैली सेट करने के लिए

CSS3 विरासत मॉड्यूल में all को एक संपत्ति कहा जाता है। यह इस तरह काम करता है:

 #sidebar ul li { all: initial; } 

2016-12 तक, सभी ब्राउज़रों पर आईई / एज और ओपेरा मिनी इस संपत्ति का समर्थन करते हैं।

आप बाल शैलियों को डिफ़ॉल्ट रूप से बदलने के लिए * चयनकर्ता का उपयोग कर सकते हैं

उदाहरण

 #parent { white-space: pre-wrap; } #parent * { white-space: initial; } 

आइफ्रेम के साथ लपेटने से पैरेंट सीएसएस अप्रचलित हो जाता है

आप इस व्यवहार को "निष्क्रिय" करने के लिए jQuery की तरह कुछ का उपयोग कर सकते हैं, हालांकि मुझे लगता है कि यह सीएसएस और जावास्क्रिप्ट में प्रदर्शित तर्क के रूप में अच्छा समाधान है। फिर भी, आपकी आवश्यकताओं पर निर्भर करते हुए आपको jQuery के सीएसएस यूटील्स, हैकी सीएसएस की कोशिश करने से आपके लिए जीवन को आसान बनाते हैं, खासकर अगर आप इसे IE6 के लिए काम करने का प्रयास कर रहे हैं

उदाहरण के लिए यदि आपके पास XHTML दस्तावेज़ में दो डिवाएं हैं

 <div id='div1'> <p>hello, how are you?</p> <div id='div2'> <p>I am fine, thank you.</p> </div> </div> 

फिर सीएसएस में कोशिश करो।

 #div1 > #div2 > p{ color: red; } 

केवल 'div2' पैराग्राफ को प्रभावित करते हैं

 #div1 > p { color: red; } 

केवल 'div1' पैराग्राफ को प्रभावित करते हैं

आपको li लिए कक्षा संदर्भ की आवश्यकता नहीं है इसके बजाय सीएसएस की तरह

 li.top-level-nav { color:black; } 

तुम लिख सकते हो

 ul#sidebar > li { color:black; } 

यह केवल li के स्टाइल को लागू करेगा जो कि तुरंत साइडबार ul से उतरते हैं

संक्षिप्त उत्तर है: नहीं, सीएसएस विरासत को रोकने के लिए संभव नहीं है। आप केवल शैलियों को ओवरराइड कर सकते हैं जो माता-पिता पर सेट हैं। कल्पना देखें:

एचटीएमएल दस्तावेज़ में हर तत्व मूल तत्व ( html ) को छोड़कर उसके अभिभावक से सभी विरासत गुणों को प्राप्त करेगा, जिसके पास माता-पिता नहीं हैं। – डब्लू 3 सी

प्रत्येक एकल विरासत में मिली संपत्ति को ओवरराइड करने के अलावा आप initial कीवर्ड का भी उपयोग कर सकते हैं, उदाहरण के लिए color: initial; । इसका उपयोग all साथ भी किया जा सकता है, जैसे all: initial; , जो सभी गुणों को एक बार में रीसेट कर देगा। उदाहरण:

 .container { color: blue; font-style: italic; } .initial { all: initial; } 
 <div class="container"> The quick brown <span class="initial">fox</span> jumps over the lazy dog </div> 

बस उन्हें "# साइडबार उल ली" चयनकर्ता में अपने डिफ़ॉल्ट पर वापस सेट करें