माता-पिता सीएसएस शैली की उपेक्षा कैसे करें

Question

मैं सोच रहा हूं कि मूल शैली को कैसे अनदेखा करें और डिफ़ॉल्ट शैली (कोई नहीं) का उपयोग करें। मैं अपने विशिष्ट मामले को एक उदाहरण के रूप में दिखाऊंगा लेकिन मुझे पूरा यकीन है कि यह एक सामान्य प्रश्न है।

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

इस समस्या को हल करने के तरीके मैं नहीं चाहता:

• मैं उस स्टाइलशीट को संपादित नहीं कर सकता, जहाँ "#elementId select" सेट किया गया है, मेरे मॉड्यूल तक इसकी पहुँच नहीं होगी।
• अधिमानतः शैली विशेषता का उपयोग करके ऊंचाई शैली को ओवरराइड नहीं करना चाहिए।

उदाहरण के लिए फायरबग का उपयोग करके मैं मूल शैली को बंद कर सकता हूं और सब कुछ ठीक है, यह वह प्रभाव है जिसके लिए मैं जा रहा हूं।

एक बार एक शैली निर्धारित होने के बाद, क्या इसे अक्षम किया जा सकता है या इसे ओवरराइड किया जाना चाहिए?

Answer 1

इसे ओवरराइड किया जाना चाहिए। आप उपयोग कर सकते हैं:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

सुनिश्चित करें कि आप !importantसीएसएस शैली में ध्वज का उपयोग करते हैं जैसे सीएसएस में margin-top: 0px !important क्या महत्वपूर्ण है?

आप एक विशेषता चयनकर्ता का उपयोग कर सकते हैं, लेकिन चूंकि यह लीगेसी ब्राउज़र द्वारा समर्थित नहीं है (IE6 आदि पढ़ें), यह एक वर्ग नाम जोड़ने के लिए बेहतर है

Comments

मैं यह कहते हुए घबराता रहता हूं कि आपको !importantजहां भी संभव हो बचना चाहिए

— याकूब श्नाइडर

Answer 2

आप इसे इस तरह से ओवरराइड करके इसे बंद कर सकते हैं:

ऊंचाई: ऑटो महत्वपूर्ण;

Comments

मैं !importantआपके उत्पादन मार्कअप में उपयोग करने के खिलाफ सलाह दूंगा - यह वास्तव में केवल डिबगिंग के समय उपयोग किया जाना चाहिए।

— एमिकेबल

@ स्थायी आप समझा सकते हैं कि यह उचित क्यों नहीं है?

— felipe_gdr

@pipo_dev ऑनलाइन बहुत सारे लेख हैं जो मुझे टिप्पणी में और उदाहरणों से बेहतर समझा सकते हैं। यह संक्षेप में, यह एक हैक है। समय का 99% यह एक उचित फिक्स की लेई में उपयोग किया जाता है जिसके परिणामस्वरूप सीएसएस बेहतर और अधिक रखरखाव योग्य होगा। में से कुछ स्वीकार्य उपयोग करता है !importantIE7 जैसे प्राचीन ब्राउज़र के लिए उपयोगिता वर्गों और पश्च संगतता हैक्स शामिल

— एमिकेबल

काम नहीं करना। पृष्ठ पर अंक लगाना अंतिम td है। .detTable td {चौड़ाई: 50%; } .pagnation {चौड़ाई: 100%! महत्वपूर्ण; }

— फिलिप रेगो

मैं @Amicable से सहमत नहीं हूँ। वास्तव में उपयोग करने का कोई विकल्प नहीं है !importantजब आप एक मूल विषय के साथ फंस जाते हैं जिसका आपके पास कोई नियंत्रण नहीं है लेकिन फिर भी ओवरराइड करना चाहते हैं।

— जस्टिन स्काइल्स

Answer 3

यह एक संपादन के कारण शीर्ष पर टकरा गया ... जवाब थोड़ा बासी हो गया है, और आज उतना उपयोगी नहीं है जितना मानक में एक और समाधान जोड़ा गया है।

अब एक "सभी" आशुलिपि संपत्ति है।

#elementId select.funTimes {
   all: initial;
}

यह सभी सीएसएस गुणों को उनके प्रारंभिक मूल्य पर सेट करता है ... ध्यान दें कि कुछ प्रारंभिक मूल्य विरासत में हैं; कुछ स्वरूपण में परिणाम अभी भी तत्व पर जगह ले रहा है।

कोड को पढ़ते समय या भविष्य में इसकी समीक्षा करते समय उस विराम की वजह से, इसका उपयोग तब तक न करें जब तक कि आप समीक्षा प्रक्रिया को सबसे महत्वपूर्ण न मान लें, जहाँ त्रुटियाँ / बग हो सकते हैं! पृष्ठ को संपादित करते समय। लेकिन स्पष्ट रूप से अगर बड़ी संख्या में गुण हैं जिन्हें रीसेट करने की आवश्यकता है, तो "सभी" जाने का रास्ता है।

मानक यहां ऑनलाइन है: https://drafts.csswg.org/css-cascade/#all-shorthand

Comments

मैं एक मॉडेल डू ब्लॉक वेबसाइट बना रहा हूं, यह मेरे HTML टैग के लिए वेबसाइट शैलियों द्वारा ओवरराइट नहीं किए जाने का समाधान था।

— लुकास एंड्रेड

Answer 4

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

Answer 5

आपको इसका उपयोग करना चाहिए

ऊंचाई: ऑटो महत्वपूर्ण;

Answer 6

एक जूमला वेबसाइट पर काम करते समय मेरी भी ऐसी ही स्थिति थी।

प्रभावित होने वाले मॉड्यूल में एक वर्ग का नाम जोड़ा गया। आपके मामले में:

<select name="funTimes" class="classname">

फिर सीएसएस में निम्नलिखित सिंगल लाइन परिवर्तन किया। रेखा को जोड़ा

#elementId div.classname {style to be applied !important;}

अच्छा काम किए!

Answer 7

अगर मैं सही ढंग से समझ में आ प्रश्न: आप उपयोग कर सकते हैं autoमें CSSइस तरह width: auto;और यह डिफ़ॉल्ट सेटिंग के लिए वापस जाना होगा।

Answer 8

यह सीएसएस के लिए समझ में आता है कि एक अतिरिक्त शैली को जोड़ने का एक तरीका है (आपके पृष्ठ के प्रमुख भाग में, उदाहरण के लिए, जो लिंक की गई शैली शीट को ओवरराइड करेगा) जैसे:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

और पहले से लागू सभी शैलियों को बंद कर दें, लेकिन ऐसा करने का कोई तरीका नहीं है । आपको ऊंचाई विशेषता को ओवरराइड करना होगा और इसे अपने पृष्ठों के सिर अनुभाग में एक नए मूल्य पर सेट करना होगा।

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Answer 9

माता-पिता कंटेनर (आमतौर पर एक फ्रेमवर्क घटक) सीएसएस शैलियों को ओवरराइड करने और अपने कस्टम शैलियों को मजबूर करने के लिए एक तत्व को फिर से सीएसएस वर्ग को फिर से लागू करने के लिए टाइपस्क्रिप्ट के नीचे देखें। आपका ऐप फ्रेमवर्क (यह कोणीय / प्रतिक्रिया हो सकता है), शायद ऐसा इसलिए होता है कि मूल कंटेनर सीएसएस को फिर से लागू किया गया था और सीएसएस-क्लास-नाम में आपके अपेक्षित प्रभावों में से कोई भी आपके बाल तत्व के लिए दिखाई नहीं दे रहा है। css-class-name '); उस कार्य को करने के लिए जो अभी-अभी हुआ है (इसे डॉक्यूमेंट में पहले से ही देखें या ईवेंट हैंडलर का अंत):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

• माइक झेंग [e-mail]

Comments

क्या आप बता सकते हैं कि किसी को इतनी सरल आवश्यकता के लिए टाइपस्क्रिप्ट का उपयोग क्यों करना चाहिए?

— निको हसे

Answer 10

ऐसे मानों का एक समूह है जिनका उपयोग CSS नियमों को पूर्ववत करने के लिए किया जा सकता है: प्रारंभिक, परेशान और वापस करना। W3C पर सीएसएस वर्किंग ग्रुप से अधिक जानकारी:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

जैसा कि यह 'ड्राफ्ट' है, सभी पूरी तरह से समर्थित नहीं हैं, लेकिन सबसे प्रमुख ब्राउज़रों में परेशान और प्रारंभिक हैं, रिवर्ट के पास कम समर्थन है।