मैं विरासत में सीएसएस शैलियों को कैसे अक्षम कर सकता हूं?

Question

तो मैं निम्नलिखित विधि का उपयोग कर गोलाकार कोनों के साथ एक कंटेनर बना रहा हूं:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div div div { 
    padding: 10px; 
} 

अब मैं अपने कंटेनर के अंदर एक div का उपयोग करना चाहता हूं:

.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

<div class='round'><div><div><div> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

हालांकि, मैंने अपने घोंसले के अंदर एक div डाल दिया divs, बटन कोने में ब्लू छवि है।

मैं विरासत पृष्ठभूमि छवि को कैसे हटा सकता हूं?

Answer 1

सरल उत्तर बदलने के लिए

div.rounded div div div { 
    padding: 10px; 
} 

div.rounded div div div { 
    background-image: none; 
    padding: 10px; 
} 

करने का कारण है, क्योंकि जब आप div.rounded div div के लिए एक नियम बनाने इसका मतलब है हरdiv तत्व एक div अंदर एक div अंदर नेस्टेड है , की कक्षा के साथ घोंसला के बावजूद।

यदि आप केवल एक div को लक्षित करना चाहते हैं जो प्रत्यक्ष वंशज है, तो आप सिंटैक्स div.rounded div > div का उपयोग कर सकते हैं (हालांकि यह केवल हाल ही के ब्राउज़र द्वारा समर्थित है)।

संयोग से, आप आमतौर पर Sliding Doors नामक तकनीक का उपयोग करके केवल दो div एस (प्रत्येक को ऊपर और नीचे या बाएं और दाएं के लिए प्रत्येक) का उपयोग करने के लिए इस विधि को सरल बना सकते हैं।

Answer 2

div को दें कि आप उसे संपत्ति को विरासत में नहीं लेना चाहते हैं पृष्ठभूमि भी।

Answer 3

सबसे साफ समाधान शायद आपके divs को सटीक बच्चों के रूप में निर्दिष्ट करना है।

इस बदलने का प्रयास करें:

div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

इस के लिए

:

div.rounded > div > div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

Answer 4

व्यापक स्टाइल शीट विरासत के लिए डिजाइन किए हैं। विरासत उनके अस्तित्व के लिए आंतरिक है। अगर इसे कैस्केडिंग के लिए बनाया नहीं गया था, तो उन्हें केवल "स्टाइल शीट" कहा जाएगा।

यह कहा गया कि, यदि विरासत वाली शैली आपकी आवश्यकताओं के अनुरूप नहीं है, तो आपको ऑब्जेक्ट के करीब एक और शैली के साथ इसे ओवरराइड करना होगा। "अवरुद्ध विरासत" की धारणा के बारे में भूल जाओ।

आप प्रत्येक व्यक्तिगत वस्तुओं को शैलियों को देकर और अधिक से अधिक ग्रैनुलर समाधान चुन सकते हैं, और सामान्य टैग जैसे div, p, pre, आदि को शैलियों नहीं दे सकते हैं।आप वस्तुओं के लिए वर्गों को परिभाषित कर सकते हैं

<style> 
#dividstyle{ 
    font-family:MS Trebuchet; 
} 
</style> 
<div id="dividstyle">Hello world</div> 

:

उदाहरण के लिए, आप शैलियों है कि एक विशिष्ट आईडी से वस्तुओं के लिए # के साथ शुरू उपयोग कर सकते हैं

<style> 
.divclassstyle{ 
    font-family: Calibri; 
} 
</style> 
<div class="divclassstyle">Hello world</div> 

आशा है कि यह मदद करता है।

Answer 5

यदि आप एचटीएमएल और सीएसएस दोनों को नियंत्रित करते हैं, तो मैं गोलाकार कोने के लिए आवश्यक सभी divs पर आईडी का उपयोग करने के लिए स्विचिंग का सुझाव देना चाहता हूं।

सीएसएस

#d1 { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
#d2 { 
    background: url('br.gif') no-repeat bottom right; 
} 
#d3 { 
    background: url('bl.gif') no-repeat bottom left; 
} 
#d4 { 
    padding: 10px; 
} 

एचटीएमएल

<div id="d1"><div id="d2"><div id="d3"><div id="d4"> 
    <div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Answer 6

सरल है divs के सभी वर्ग ify:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div.br { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div.br div.bl { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div.br div.bl div.inner { 
    padding: 10px; 
} 
.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

और फिर उपयोग करें:

<div class='round'><div class='br'><div class='bl'><div class='inner'> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div>