मैं बाह्य सीएसएस के साथ इनलाइन शैलियों को कैसे ओवरराइड कर सकता हूं?

99

मेरे पास मार्कअप है जो इनलाइन शैलियों का उपयोग करता है, लेकिन मेरे पास इस मार्कअप को बदलने की पहुंच नहीं है। मैं केवल सीएसएस का उपयोग करके किसी दस्तावेज़ में इनलाइन शैलियों को कैसे ओवरराइड कर सकता हूं? मैं jQuery या जावास्क्रिप्ट का उपयोग नहीं करना चाहता।

HTML:

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

सीएसएस:

div {
   color: blue; 
   /* This Isn't Working */
}

css

— श्री एलियन
स्रोत

2

यदि आप उन्हें ओवरराइड करना चाहते हैं तो इनलाइन शैलियों का उपयोग क्यों करें?

— कपटी दाढ़ी

36

@BFDatabaseAdmin वह मार्कअप तक पहुंचने में सक्षम नहीं हो सकता है जहां इनलाइन शैलियों को घोषित किया गया है।

— टायलरएच

176

केवल इनलाइन शैली को ओवरराइड करने का तरीका !importantसीएसएस नियम के पास कीवर्ड का उपयोग करना है । निम्नलिखित इसका एक उदाहरण है।

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

स्निपेट का विस्तार करें

महत्वपूर्ण लेख:

उपयोग करना !importantएक अच्छा अभ्यास नहीं माना जाता है । इसलिए, आपको !importantइनलाइन स्टाइल दोनों से बचना चाहिए ।

!importantकिसी भी सीएसएस नियम में कीवर्ड जोड़ना नियम को उस तत्व के लिए अन्य सभी सीएसएस नियमों से अधिक पूर्व अनुमति देता है ।

यह मार्कअप से इनलाइन शैलियों को भी ओवरराइड करता है ।

ओवरराइड करने का एकमात्र तरीका एक और !importantनियम का उपयोग करके , सीएसएस में उच्च सीएसएस विशिष्टता के साथ या बाद में कोड में समान सीएसएस विशिष्टता के साथ घोषित किया गया है।

जरुर पढ़े - MDN CSS द्वारा CSS की विशिष्टता

— रोहित अग्रवाल
स्रोत

1

अच्छी तरह से उस शैली का हिस्सा है जो वास्तव में उसके लिए जरूरी नहीं है कि वह केवल इनलाइन सीएसएस को ओवरराइड करने के लिए उपयोग कर रहा है

— रोहित अग्रवाल

1

मुझे पता है लेकिन मैं वही कह रहा हूं! महत्वपूर्ण केवल विशिष्ट संपत्ति के लिए स्कोर बढ़ाएगा, वह कुछ ब्लॉक में अन्य संपत्तियों (ओवरराइडिंग के लिए नहीं) का उपयोग कर सकता है

— रोहित अग्रवाल

क्यों महत्वपूर्ण है बुरा अभ्यास?

— सिनिस्टर बीयर्ड

1

@BFDatabaseAdmin क्योंकि आप बाद में उस ओवरराइड नहीं कर सकते हैं यदि आपको किसी विशेष मामले की आवश्यकता है

— रोहित अग्रवाल

1

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

— My1

26

inline-stylesकिसी दस्तावेज़ में सर्वोच्च प्राथमिकता होती है, इसलिए उदाहरण के लिए कहें कि यदि आप किसी divतत्व का रंग बदलना चाहते हैं blue, लेकिन आप inline styleएक colorसंपत्ति सेट के साथ हैंred

<div style="font-size: 18px; color: red;">
   Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

तो, क्या मुझे jQuery / जावास्क्रिप्ट का उपयोग करना चाहिए? - उत्तर है नहीं

हम element-attrसीएसएस चयनकर्ता का उपयोग कर सकते हैं !important, ध्यान दें, !importantयहाँ महत्वपूर्ण है, अन्यथा यह इनलाइन शैलियों की सवारी नहीं करेगा।

<div style="font-size: 30px; color: red;">
    This is a test to see whether the inline styles can be over ridden with CSS?
</div>

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

डेमो

नोट: !importantकेवल का उपयोग करना यहाँ काम करेगा, लेकिन मैंने div[style]विशेष रूप divसे style विशेषता का चयन करने के लिए चयनकर्ता का उपयोग किया है

— श्री एलियन
स्रोत

2

तो, क्या मुझे इनलाइन शैलियों का उपयोग करना चाहिए? - उत्तर है NO :-)

— PeeHaa

"तो, क्या मुझे jQuery / जावास्क्रिप्ट का उपयोग करना चाहिए? - उत्तर है नहीं" क्यों? अगर मैं एक ऐसे वातावरण (जैसे कि शेयरपॉइंट) में काम कर रहा हूं, जहां इनलाइन शैलियों को एक बेकाबू इकाई द्वारा तत्वों में जोड़ा जाता है तो मैं अपनी साइट बाहरी विषय के माध्यम से शोइंग इनलाइन शैलियों को हटाने के लिए Jquery का उपयोग क्यों नहीं करूंगा? ब्लास्टिंग से ज्यादा प्रीसेशन सॉल्यूशन लगता है! एक विशेषता पर मैं बाद में एक विशिष्ट उदाहरण में ओवरराइड करना चाह सकता हूं।

— नीबेरू

2

@Neberu - क्योंकि JS को ब्राउज़र में अवरुद्ध / बंद किया जा सकता है। !importantAFAIK का उपयोग नहीं किया जा सकता है।

— टोनी

1

यह भी सामान्य रूप से खराब है, मेरा मतलब है कि आप किसी अज्ञात व्यक्ति द्वारा आपके द्वारा भेजी गई निष्पादन योग्य फाइलें खोलते हैं? मुझे नहीं लगता, लेकिन एक ब्राउज़र प्रत्येक क्लिक के साथ ऐसा करता है

— My1

11

आप इनलाइन शैली को छोड़कर इनलाइन !importantशैली को आसानी से ओवरराइड कर सकते हैं

इसलिए

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This will  Work */
}

लेकिन अगर आपके पास है

<div style="font-size: 18px; color: red !important;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This Isn't Working */
}

अब यह redकेवल होगा .. और आप इसे ओवरराइड नहीं कर सकते

— IE इससे दूर रहता है
स्रोत

1

यह उन उत्तरों से कैसे अलग है जो महीनों पहले जोड़े गए थे?

— सिंसियर बियर्ड

4

@BFDatabaseAdmin यह उत्तर व्यवहार का वर्णन कर रहा है जब इनलाइन शैली है !important, एक बिंदु जो अन्य उत्तरों में से किसी द्वारा कवर नहीं किया गया है। यह पूरी तरह से स्टैंड-अलोन उत्तर नहीं हो सकता है, लेकिन यह प्रदान किए गए अन्य उत्तरों के लिए अलग है।

— जीआर

लेकिन फिर महत्वपूर्ण के साथ एक इनलाइन शैली का उपयोग करना वास्तव में बहुत अधिक है क्योंकि यह डिफ़ॉल्ट रूप से वैसे भी सर्वोच्च प्राथमिकता है।

— My1

6

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

नीचे अधिक विवरण के लिए लिंक दिया गया है: http://css-tricks.com/override-inline-styles-with-css/

— jroi_web
स्रोत

5

यह उन उत्तरों से कैसे अलग है जो महीनों पहले जोड़े गए थे?

— सिंसियर बियर्ड

1

शायद कोई अंतर नहीं है यदि आप पहले से ही जवाब जानते थे ... लेकिन कुछ नए शौक के लिए, मैं उम्मीद कर रहा हूं कि यह उनकी मदद कर सकता है..तुरंत वह लिंक जहां यह अधिक विस्तृत है ... वैसे भी टिप्पणी करने के लिए धन्यवाद।

— jroi_web

1

!importantसीएसएस संपत्ति में इस्तेमाल किया

<div style="color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
        color: blue !important;
    }

— विशाल वाघसिया
स्रोत