सीएसएस शैली को ओवरराइड करें

Question

मैं कुछ सीएसएस वर्गों को परिभाषित कर रहा हूं, जो किसी तालिका पर लागू होने पर, कुछ डिफ़ॉल्ट स्टाइल उत्पन्न करेंगे।

उदाहरण के लिए, मान लीजिए कि मैं एक वर्ग mytable बनाएं जिसका नाम:

.myTable { 
    th { 
    background-color: #000; 
    } 

    td { 
    background-color: #555; 
    } 
} 

तो .myTable वर्ग के साथ किसी भी तालिका डिफ़ॉल्ट रूप से वें और टीडी पर उन रंगों मिलेगा।

मैंने सोचा कि अगर एक और वर्ग एक व्यक्ति टीडी को सौंपा जा रहे थे, तो यह डिफ़ॉल्ट शैली को ओवरराइड करेगी।

तो अगर मैं एक वर्ग था:

.red { background-color: red; } 

और एक मेज:

<table class=myTable> 
    <th class="red">Content</th> 
    <td>Hello!</td> 
</table> 

मैंने सोचा था कि "लाल" वर्ग हैडर की पृष्ठभूमि के बजाय लाल हो सकता है, कारण होगा काली। बात वह नहीं है। इसलिए जैसे mytable वर्ग के भीतर परिभाषित किया जाना इस वर्ग के लिए आदेश मूल ओवरराइड करने के लिए यह किया है:

td.red { background-color: red; } 

मैं यहाँ कुछ याद आ रही हूँ, वहाँ एक और तरीका है, ताकि मैं डिफ़ॉल्ट शैलियों हो सकता था यह करने के लिए है कि अधिक आसानी से ओवरराइड कर रहे हैं?

Answer 1

विचार जो शैली का उपयोग करने कि दो बातों पर निर्भर करता है: कैसे विशिष्ट यह चयनकर्ता है, शासन की स्थिति (नवीनतम नियम जीतता है)। उदाहरण:

p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

पैराग्राफ नीले रंग के होंगे। एक और उदाहरण:

body p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

पैराग्राफ लाल हो जाएगा क्योंकि "बॉडी पी" अधिक विशिष्ट है।

संपादित करें: उपयोग करने से बचने के लिए भी प्रयास करें! महत्वपूर्ण। यह समर्थित है लेकिन एक दुष्प्रभाव यह है कि आप इसे कभी भी ओवरराइड नहीं कर सकते हैं। इस प्रकार केवल उन चरम मामलों में इसका उपयोग करें जहां आपके पास विशिष्ट पर्याप्त नियमों का निर्माण करने का कोई तरीका नहीं है (उदा .: जेनेरिक print.css)।

Answer 2

कुछ शैली प्राथमिकता देने का एक मानक तरीका है।

td.red { background-color: red !important; } 

Answer 3

यह सीएसएस इस्तेमाल किया चयनकर्ताओं की विशिष्टता का प्रश्न था नहीं है (यानी कैसे वास्तव में एक चयनकर्ता किसी भी HTML तत्व से मेल खाता है)। चयनकर्ता जितना अधिक विशिष्ट होगा, इसकी शैलियों की प्राथमिकता उतनी अधिक होगी। CSS Specificity: Things You Should Know:

CSS चयनकर्ता विशिष्टता के बारे में गहराई से स्पष्टीकरण के लिए, इस पेज पर एक नजर है।

Answer 4

जानने के कुछ तरीके हैं, तो आप इस तरह के रूप घोषणा के अंत में !important उपयोग कर सकते हैं:

.red { 
    background-color: red !important; 
} 

इसके अलावा, अधिक विशिष्ट एक घोषणा, अधिक प्रचलित यह हो जाएगा। तो table.myTable td.red {} में कुछ भी td.red{} में किसी भी चीज़ पर अधिक प्रसार होगा।

Answer 5

!important नियम सीएसएस में एक विशेष संपत्ति ओवरराइड करता है।

तो किसी संपत्ति को ओवरराइड करने के मामले में आपको हमेशा इसे मूल्य के साथ उपयोग करना चाहिए। पर

अधिक विवरण: https://css-tricks.com/when-using-important-is-the-right-choice/