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

Question

मेरे साइडबार में एक पदानुक्रमित नेविगेशन मेनू है जो नेस्टेड सूचियों (<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>

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

Comments

मैंने इसी तरह के सवालों के लिए साइट खोजी और कुछ भी नहीं पाया (यह कहते हुए कि एक नहीं है, लेकिन मैंने देखा)। यदि आप जानते हैं कि यह क्या हो सकता है तो कृपया मुझे इसके लिए निर्देशित करें? धन्यवाद!

stackoverflow.com/questions/747308/breaking-css-inheritance | यह बहुत कुछ कहता है कि मैथ्यू ने क्या जवाब दिया।

— जेसन

तो मैं इसका जवाब लेता हूं "नहीं, बस ऐसा करने का कोई तरीका नहीं है - आपको मैन्युअल रूप से उप-आइटम पर हर शैली सेटिंग को ओवरराइड करना होगा" - क्या मैं इसे सही ढंग से व्याख्या कर रहा हूं? एक बार फिर धन्यवाद।

Answer 1

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

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

Comments

यह जानकारी IE8 के बाद से पुरानी है। सिलविउ पोस्टावारू द्वारा उत्तर देखें। कृपया जाँच को और अधिक उपयुक्त उत्तर में बदलने के लिए विचार करें।

— tmuecksch

योग्य, मैं सहमत हूँ कि कैस्केडिंग सार है। लेकिन एक विशिष्ट माता-पिता से प्रचार को रोकने का एक तरीका होना चाहिए जो अलग होने का इरादा है।

— ओबे अब्द-अल्गाडर

Answer 2

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

इसलिए उपयोग कर रहे हैं

#parent > child

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

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

#parent child child

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

Comments

क्या आप मुझे JSFiddle की कार्रवाई में दिखा सकते हैं? मैंने इनलाइन-ब्लॉक प्रदर्शित डिव को केंद्र में रखने की कोशिश की, लेकिन यह अभी भी डिव के अंदर के पाठ को केंद्र में रखता है।

— कलमी

Answer 3

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

#sidebar ul li {
  all: initial;
}

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

Comments

@AndriusDobrotinas अंततः समर्थित बनने के लिए? मैं आपकी टिप्पणी को पूरी तरह से समझ नहीं पा रहा हूं। वहाँ है कि इस सुविधा प्रदान करता है, अगर आप PostCSS का प्रयोग कर एक PostCSS प्लगइन है: github.com/maximkoretskiy/postcss-initial

— Boldewyn

@AndriusDobrotinas, आपकी टिप्पणी बहुत गैर-प्रतिरोधी है। जवाब समुदाय के लिए पोस्ट किया गया था; इसके लाभ को देखने के लिए अपनी पूरी कोशिश करें।

— कोडी

अब तक, केवल IE और ओपेरा मिनी इसका समर्थन नहीं करते हैं, अन्य सभी प्रमुख ब्राउज़र करते हैं

— महापुरूष

@Boldewyn कोई 'डिफ़ॉल्ट' मान नहीं है, जहां तक ​​कोई लिंक किए गए w3

— डॉक्स

@webeno था, जब मैंने उत्तर लिखा था: w3.org/TR/2013/WD-css3-cascade-20130103/#all-shorthand ऐसा लगता है कि पुराने defaultऔर नए के बीच कुछ सूक्ष्म अंतर हैं unset, लेकिन अब मैं ' आगे की जांच के लिए कोई समय नहीं मिला। इसे आज तक लाने के लिए उत्तर को संपादित करने के लिए स्वतंत्र महसूस करें।

— बोल्ड्यूविन

Answer 4

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

उदाहरण

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

#parent * {
    white-space: initial;
}

Comments

यह एक बहुत ही सुंदर समाधान है - खासकर यदि आप माता-पिता की कक्षा को नहीं जानते हैं।

— BurninLeo

मुझे लगता है कि मुझे इसका उत्तर पता है, लेकिन क्या इस इनलाइन को सेट करने के लिए कुछ भी है? <div id="parent" style="white-space:pre-wrap;*white-space:initial;"/>

— 1.21 गीगावाट 3

Answer 5

Iframe के साथ रैपिंग से पैरेंट css अप्रचलित हो जाता है।

Comments

मजेदार है कि यह सबसे खराब उत्तर है क्योंकि तकनीकी रूप से यह सीएसएस विरासत को रोकने का एकमात्र भौतिक तरीका है। ऐसा नहीं है कि मैं तर्क दे रहा हूं कि आपको इसे इस तरह से इस्तेमाल करना चाहिए।

— डेविडोड्रिज़ो

मेरा सुझाव है कि सीएसएस के साथ भौतिक नहीं हो रहा है, इसे आभासी दुनिया में छोड़ दें जहां यह है!

— माइक्रेलवर्ड 82

वास्तव में जोड़ने iframeसे मेरे बाल घटक अदृश्य हो गए। विचार?

— केविन घबोसी 19

Answer 6

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

HTML डॉक्यूमेंट में प्रत्येक तत्व मूल तत्व ( html) को छोड़कर अपने माता-पिता से सभी अंतर्निहित गुण प्राप्त करेगा , जिसमें माता-पिता नहीं है। - W3C

हर एक विरासत में मिली संपत्ति को ओवरराइड करने के अलावा। आप 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>

ब्राउज़र समर्थन के अनुसार टेबल सकते हैं मैं उपयोग ...

• all (वर्तमान में IE और एज दोनों में कोई समर्थन नहीं है, अन्य अच्छे हैं)
• initial (वर्तमान में IE में कोई समर्थन नहीं है, अन्य अच्छे हैं)

---

आप कुछ मामलों में सीधे बच्चों के चयनकर्ता> का उपयोग करके इसे उपयोगी पा सकते हैं । उदाहरण:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

सीमा शैली को केवल प्रत्यक्ष बच्चों के लिए लागू किया गया है <li>, जैसा borderकि एक गैर-विरासत संपत्ति है। लेकिन सभी बच्चों को टेक्स्ट कलर लागू किया गया है, जैसा colorकि विरासत में मिली संपत्ति है।

इसलिए, >चयनकर्ता गैर-विरासत वाले गुणों के साथ ही उपयोगी होगा, जब यह विरासत को रोकने की बात आती है।

Answer 7

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

Answer 8

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

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

फिर CSS में इसे try करें।

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

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

#div1 > p {
    color: red;
} 

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

Answer 9

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

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

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

ul#sidebar > li { color:black; }

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

Answer 10

बस उन्हें "# ulbar ul li" चयनकर्ता में अपनी चूक पर वापस सेट करें

Comments

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