सीएसएस विरासत को रोकने के लिए कैसे करें

Question

नीचे उपयोग किए गए नमूना कोड ब्लॉक हैं। मेरे पास सीएसएस का दो सेट है, और दो यूएल घटक पर आवेदन करना चाहता हूं। हालांकि, परिणाम निकलता है, आंतरिक "यूएल" कुछ सीएसएस धारण करेगा जो उसके माता-पिता के लिए परिभाषित किया गया है। और यहां तक ​​कि "बी" में परिभाषित सीएसएस में से कुछ को "ए" द्वारा ओवरराइड किया जाएगा ... दुःस्वप्न ...

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

<ul class="moduleMenu-ul"> 
    /* for loop begin */ 
     <li class="moduleMenu-li"> 
        <a></a> 
     </li> 
    /* for loop end */ 
    <li class="moduleMenu-li"> 
      <a>On Over the div below will be show</a> 
      <div id="extraModuleMenuOptions"> 
       <ul class="flow-ul"> 
       /*for loop begin*/ 
        <li class="flow-li"> 
          <a class="flow-a"></a> 
        </li> 
       /*for loop end*/ 
       </ul> 
      </div> 
    </li> 
</ul 

सीएसएस:

.moduleMenu-ul { 
    width: 100%; 
    height: 43px; 
    background: #FFF url("../images/module-menu-bg.gif") top left repeat-x; 
    font-weight: bold; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.moduleMenu-ul .moduleMenu-li { 
    display: block; 
    float: left; 
    margin: 0 0 0 5px; 
} 

.moduleMenu-ul .moduleMenu-li a { 
    height: 43px; 
    color: #777; 
    text-decoration: none; 
    display: block; 
    float: left; 
    line-height: 200%; 
    padding: 8px 15px 0; 
    text-transform:capitalize; 
} 

.moduleMenu-उल .moduleMenu-ली एक: मंडराना { का रंग: # 333; }

.moduleMenu-ul .moduleMenu-li a.current{ 
    color: #FFF; 
    background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x; 
    padding: 5px 15px 0; 
} 

#extraModuleMenuOptions { 
    z-index:99999; 
    visibility:hidden; 
    position:absolute; 
    color:#FFFFFF; 
    background-color:#236FBD; 
} 

#extraModuleMenuOptions .flow-ul { 
    text-align:left; 
} 

#extraModuleMenuOptions .flow-ul .flow-li { 
    display:block; 
} 

#extraModuleMenuOptions .flow-ul .flow-li .flow-a { 
    color:#FFFFFF; 
} 

Answer 1

अवहेलना मूल्यों भीतरी यूएल में मूल्यों के साथ बाहरी यूएल में मौजूद।

Answer 2

यदि आंतरिक वस्तु उन गुणों को विरासत में ले रही है जो आप नहीं चाहते हैं, तो आप उन्हें हमेशा जो चाहते हैं उसे सेट कर सकते हैं (यानी - गुण कैस्केडिंग कर रहे हैं, और इसलिए आप उन्हें निम्न स्तर पर ओवरराइट कर सकते हैं)।

उदा।

.li-a { 
    font-weight: bold; 
    color: red; 
} 

.li-b { 
    color: blue; 
} 

इस मामले में, "ली-बी" अभी भी बोल्ड होगा भले ही आप इसे नहीं चाहते हैं। यह नहीं बोल्ड बनाने के लिए आप कर सकते हैं:

.li-b { 
    font-weight: normal; 
    color: blue; 
} 

Answer 3

मान लीजिए कि आपने इस है:

<ul> 
    <li></li> 
    <li> 
     <ul> 
      <li></li> 
      <li></li> 
     </ul> 
    </li> 
    <li></li> 
<ul> 

अगर आप IE6 संगतता (Quirksmode पर संदर्भ) की आवश्यकता नहीं है अब आप निम्नलिखित सीएसएस

हो सकता है

ul li { background:#fff; } 
ul>li { background:#f0f; } 

> प्रत्यक्ष बच्चों का ऑपरेटर है, इसलिए इस मामले में केवल li एस का पहला स्तर बैंगनी होगा।

आशा इस मदद करता है

Answer 4

लघु कहानी है कि यह तुम यहाँ क्या चाहते हैं ऐसा करना संभव नहीं है। कोई सीएसएस नियम नहीं है जो "किसी अन्य नियम को अनदेखा" करना है। इसके आस-पास एकमात्र तरीका आंतरिक तत्वों के लिए एक अधिक विशिष्ट सीएसएस नियम लिखना है जो इसे पहले से कैसे बदलता है, जो कि बट में दर्द है।

नीचे दिए गए उदाहरण लें:

<div class="red"> <!-- ignore the semantics, it's an example, yo! --> 
    <p class="blue"> 
     Blue text blue text! 
     <span class="notBlue">this shouldn't be blue</span> 
    </p> 
</div> 
<div class="green"> 
    <p class="blue"> 
     Blue text! 
     <span class="notBlue">blah</span> 
    </p> 
</div> 

.notBlue वर्ग माता पिता स्टाइल पर वापस लौटने बनाने के लिए कोई तरीका नहीं है।

.red, .red .notBlue { 
    color: red; 
} 
.green, .green .notBlue { 
    color: green; 
} 

Answer 5

सीएसएस में वाइल्डकार्ड * selector का उपयोग करते हुए एक तत्व की सभी विशेषताओं के लिए विरासत ओवरराइड करने के लिए (इन वापस उनके प्रारंभिक अवस्था में सेट करके): सबसे अच्छा तुम कर सकते हो यह रहा है।

इसके उपयोग का एक उदाहरण:

li * { 
    display: initial; 
} 

Answer 6

आप सीएसएस विरासत से बचने के लिए एक iframe में नई सामग्री लोड कर सकते हैं।

Answer 7

हालांकि यह वर्तमान में उपलब्ध नहीं है, this fascinating article छाया डोम के उपयोग पर चर्चा करता है, जो कि ब्राउज़र द्वारा उपयोग की जाने वाली तकनीक है जो कि कितनी दूर तक कैस्केडिंग स्टाइल शीट को कैस्केड करता है, बोलने के लिए। वह कोई एपीआई प्रदान नहीं करता है, क्योंकि ऐसा लगता है कि डीओएम के इस हिस्से तक पहुंच प्रदान करने में कोई मौजूदा पुस्तकालय नहीं है, लेकिन यह एक लायक है। अगर यह आपको साजिश देता है तो लेख के निचले हिस्से में मेलिंग सूचियों के लिंक हैं।

Answer 8

गैर विरासत वाले तत्वों में डिफ़ॉल्ट शैली सेट होना चाहिए।
यदि पैरेंट क्लास color:white और font-weight:bold शैली सेट करता है तो किसी भी विरासत वाले बच्चे को अपनी कक्षा में 'रंग: काला' और font-weight: normal सेट करना होगा। यदि style सेट नहीं है, तो तत्वों को उनकी शैली उनके माता-पिता से मिलती है।