किसी अन्य सीएसएस वर्ग का उपयोग करके सीएसएस वर्ग के गुणों को कैसे ओवरराइड किया जाए

Question

मैं CSS3 के लिए काफी नया हूं और मैं निम्नलिखित कार्य करने में सक्षम होना चाहता हूं:

जब मैं किसी वर्ग को एक तत्व में जोड़ता हूं, तो वह इस विशिष्ट तत्व में प्रयुक्त दूसरे वर्ग के गुणों से आगे निकल जाता है।

मान लीजिए कि मेरे पास है

<a class="left carousel-control" href="#carousel" data-slide="prev">

मैं एक वर्ग को जोड़ने में सक्षम होना चाहता हूं bakground-none, जो कक्षा में डिफ़ॉल्ट पृष्ठभूमि को ओवरराइड करेगाleft ।

धन्यवाद!

Answer 1

ऐसे विभिन्न तरीके हैं जिनमें गुणों को ओवरराइड किया जा सकता है। मान लिया आपने

.left { background: blue }

निम्न में से कोई भी इसे ओवरराइड करेगा:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

चयनकर्ता विशिष्टता द्वारा पहले दो "जीत"; तीसरा !important, एक कुंद साधन से जीतता है ।

आप अपनी शैली की चादरें भी व्यवस्थित कर सकते हैं ताकि उदाहरण के लिए नियम

.background-none { background: none; }

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

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

PS मैंने उपयोग किया leftऔर background-noneजैसा कि वे प्रश्न में उपयोग किया गया था। वे वर्ग नामों के उदाहरण हैं जिनका उपयोग नहीं किया जाना चाहिए , क्योंकि वे विशिष्ट प्रतिपादन को दर्शाते हैं न कि संरचनात्मक या अर्थगत भूमिकाएँ।

Comments

आपने लिखा है कि वे वर्ग नामों के उदाहरण हैं जिनका उपयोग नहीं किया जाना चाहिए, क्योंकि वे विशिष्ट प्रतिपादन को दर्शाते हैं न कि संरचनात्मक या अर्थगत भूमिकाएँ। क्या आप कृपया विस्तार से बता सकते हैं? क्यों leftऔर क्या background-noneसे बचा जाना चाहिए?

— सुकरात

@Socrates: कुछ लोगों का मानना है कि सीएसएस वर्गों केवल ऐसे नाम हैं जो की पहचान क्या तत्व यह करने के लिए लागू किया जा रहा है है या क्या करता है (जैसे दी जानी चाहिए button, name-label, आदि)। दूसरों का मानना है कि सीएसएस अनियंत्रित हो जाता है अगर आप इस दृष्टिकोण का उपयोग और जहां कक्षाएं संपत्ति मूल्यों (जैसे के अनुरूप आप का उपयोग करना चाहिए "उपयोगिता पहले" या "कार्यात्मक" सीएसएस margin-top-4, width-10, आदि)। ऐतिहासिक रूप से "अर्थवादी" दृष्टिकोण प्रमुख रहा है जबकि हाल ही में "कार्यात्मक" दृष्टिकोण अनुयायियों को प्राप्त हुआ है। एक मध्यम आकार की परियोजना पर दोनों का प्रयास करें और फिर अपने लिए निर्णय लें जो श्रेष्ठ है।

— मटिया

Answer 2

बस इसका उपयोग !importantओवरराइड करने में मदद करेगा

background:none !important;

यद्यपि यह एक बुरा अभ्यास कहा जाता है, !importantउपयोगिता वर्गों के लिए उपयोगी हो सकता है, आपको बस इसे जिम्मेदारी से उपयोग करने की आवश्यकता है, इसे जांचें: जब महत्वपूर्ण का उपयोग करना सही विकल्प है

Comments

महत्वपूर्ण एक बुरा अभ्यास है। जल्द ही, सभी कोड महत्वपूर्ण हो जाते हैं।

— TPAKTOPA

Answer 3

importantकीवर्ड के विकल्प के रूप में , आप चयनकर्ता को अधिक विशिष्ट बना सकते हैं, उदाहरण के लिए:

.left.background-none { background:none; }

(नोट: वर्ग नामों के बीच कोई स्थान नहीं)।

इस मामले में, नियम लागू होगी जब दोनों .leftऔर .background-none(चाहे आदेश या निकटता के) वर्ग विशेषता में सूचीबद्ध हैं।

Answer 4

आपको अपनी स्टाइलिंग की विशिष्टता को बढ़ाकर ओवरराइड करना चाहिए । विशिष्टता बढ़ाने के विभिन्न तरीके हैं। !importantजो प्रभाव विशिष्टता का उपयोग , एक बुरा अभ्यास है क्योंकि यह आपकी स्टाइल शीट में प्राकृतिक कैस्केडिंग को तोड़ देता है।

Css-tricks.com से लिए गए आरेख का अनुसरण करने से आपको अंक संरचना के आधार पर अपने तत्व के लिए सही विशिष्टता उत्पन्न करने में मदद मिलेगी। जिसकी विशिष्टता में उच्चतर अंक होंगे, वह जीतेगा। एक खेल की तरह लगता है - है ना?

Cout-tricks.com पर यहां चेकआउट नमूना गणना । इससे आपको अवधारणा को अच्छी तरह से समझने में मदद मिलेगी और इसमें केवल 2 मिनट का समय लगेगा।

यदि आप अपने आप से अलग-अलग विशिष्टताओं का उत्पादन और / या तुलना करना पसंद करते हैं, तो इस विशिष्टता कैलकुलेटर की कोशिश करें: https://specificity.keegan.st/ या आप सिर्फ पारंपरिक कागज / पेंसिल का उपयोग कर सकते हैं।

आगे पढ़ने के लिए एमडीएन वेब डॉक्स आज़माएं ।

उपयोग न करने के लिए शुभकामनाएँ !important।

Answer 5

यदि आप bakground-noneअन्य वर्गों के बाद वर्ग को सूचीबद्ध करते हैं, तो इसके गुण पहले से सेट किए गए लोगों को ओवरराइड करेंगे। उपयोग करने की कोई आवश्यकता नहीं है!importantयहाँ है।

उदाहरण के लिए:

.red { background-color: red; }
.background-none { background: none; }

तथा

<a class="red background-none" href="#carousel">...</a>

लिंक पर लाल पृष्ठभूमि नहीं होगी। कृपया ध्यान दें कि यह केवल उन संपत्तियों को ओवरराइड करता है जिनमें एक चयनकर्ता होता है जो कम या समान रूप से विशिष्ट होता है।

Comments

उत्तर के लिए धन्यवाद! मैंने इसे पहले समाधान के रूप में आज़माया, लेकिन किसी कारण से यह काम नहीं किया!

— user3075049

सीएसएस कक्षाओं को ओवरराइड करने का यह तरीका काम नहीं करेगा यदि शैलियों को एक विशिष्ट तरीके से परिभाषित किया जाता है जैसे ।फॉर्म-हॉरर -फॉर्म-ग्रुप {मार्जिन-लेफ्ट: -15px}। यहाँ आपको महत्वपूर्ण प्रयोग करना होगा

— DanKodi

जोड़ने के लिए महत्वपूर्ण .background- कोई नहीं {पृष्ठभूमि: कोई नहीं! } यह ठीक काम करता है

— santhosh

Answer 6

LIFO जिस तरह से ब्राउज़र CSS गुणों को पार्स करता है..यदि आप Sass का उपयोग कर रहे हैं, तो इसे वैरिएबल घोषित करें

"$ हेडर-बैकग्राउंड: रेड;"

लाल या नीले जैसे सीधे मान प्रदान करने के बजाय इसका उपयोग करें। जब आप ओवरराइड करना चाहते हैं तो मान को फिर से असाइन करें

"$ हेडर पृष्ठभूमि: नीले"

फिर

पृष्ठभूमि रंग: $ हेडर पृष्ठभूमि;

यह आसानी से ओवरराइड करना चाहिए। "महत्वपूर्ण" का उपयोग करना हमेशा सही विकल्प नहीं होता है..बस एक हॉटफिक्स