ओवरराइड कैसे करें? महत्वपूर्ण

Question

मैंने एक कस्टम स्टाइल शीट बनाई है जो मेरे वर्डप्रेस टेम्पलेट के लिए मूल सीएसएस को ओवरराइड करती है। हालाँकि, मेरे कैलेंडर पृष्ठ पर, मूल CSS में !importantघोषणा के साथ प्रत्येक टेबल सेल की ऊंचाई है :

td {height: 100px !important}

क्या कोई रास्ता है जिससे मैं इसे ओवरराइड कर सकता हूं?

Comments

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

— पेट्र जेनेक

कौन सी शीट आखिरी बार आती है, आपकी या टेम्पलेट की?

— j08691

यही कारण !importantहै कि हानिकारक माना जाता है।

— स्पडली

सबसे शक्तिशाली तरीका ऐसा है: td [style] {height: 110px; important; }। यह इस तरह से कार्य करता है जैसे कि आप शैली इनलाइन को html में इंजेक्ट करते हैं क्योंकि आप शैलियों को टैग की वास्तविक शैली विशेषता पर लागू कर रहे हैं।

— DMTintner

Answer 1

ओवरराइडिंग! महत्वपूर्ण संशोधक

1. बस के साथ एक और सीएसएस नियम जोड़ें !important, और चयनकर्ता को एक उच्च विशिष्टता प्रदान करें (चयनकर्ता के लिए एक अतिरिक्त टैग, आईडी या वर्ग जोड़कर)
2. मौजूदा चयनकर्ता की तुलना में बाद के बिंदु पर समान चयनकर्ता के साथ एक सीएसएस नियम जोड़ें (एक टाई में, पिछले एक परिभाषित जीत)।

उच्च विशिष्टता के साथ कुछ उदाहरण (पहला सबसे बड़ा / अधिक है, तीसरा सबसे कम है):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

या मौजूदा एक के बाद एक ही चयनकर्ता जोड़ें:

td {height: 50px !important;}

अस्वीकरण:

यह उपयोग करने के लिए लगभग एक अच्छा विचार नहीं है !important। यह वर्डप्रेस टेम्पलेट के रचनाकारों द्वारा खराब इंजीनियरिंग है। वायरल फैशन में, यह टेम्पलेट के उपयोगकर्ताओं को !importantइसे ओवरराइड करने के लिए अपने स्वयं के संशोधक जोड़ने के लिए मजबूर करता है, और यह जावास्क्रिप्ट के माध्यम से इसे ओवरराइड करने के लिए विकल्पों को सीमित करता है।

लेकिन, यह जानना उपयोगी है कि इसे कैसे ओवरराइड करना है, अगर आपको कभी-कभी करना पड़ता है।

Comments

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

— ZenMaster

बहुत बढ़िया जवाब। मैं सहमत हूं, इसका एक गड़बड़ है। यह मुझे उनके हैक के आसपास हैक करने के लिए मजबूर करता है, फिर किसी को मेरी हैक के आसपास हैक करने के लिए, आदि। मेरे मामले में मुझे उन टेम्पलेट्स से निपटना होगा जो अपने सीएसएस को डेटाबेस से कहीं खींचते हैं। मैं DB डंप पकड़ता हूं और यह दिखाता है कि यह 1MB के जोंस ब्लॉब से आता है। मेरे लिए बहुत उपयोगी नहीं है कि मैं इसे कहां बदलूं, मुझे सीएसएस को एक कोड फ़ाइल में जोड़ने के लिए मजबूर करना चाहिए, जिस तरह से यह किया जाना चाहिए, इन गंदा हैक के अलावा।

— जोश रिबाकॉफ

यह भी देखें: बीच संबंध महत्वपूर्ण और सीएसएस विशिष्टता!

— BoltClock

टैग पहचानकर्ता को जोड़ने का एक अच्छा विचार हो सकता है, भले ही यह सीएसएस को धीमा कर दे। बस एक को ठीक करना था जहाँ मुझे div # हैडर में डालना था। } इसे लेने के लिए ... बहुत परेशान

— Sparatan117

के लिए अच्छे उपयोग हैं !important। जैसे ब्राउज़र- या साइट-वाइड स्टाइल एक स्टाइलिश, AdBlock या uBlock स्क्रिप्ट से ओवरराइड करता है। या जब आपके पास आधार सीएसएस के लिए कोई यथोचित आसान पहुंच नहीं है, जो बहुत जटिल हो सकती है, कई फाइलों के माध्यम से फैलती है, और समय के साथ बदल जाती है (और उपयोग भी हो सकती है !important)। किसी भी उपकरण की तरह, सकारात्मक या नकारात्मक क्षमता इस बात पर आधारित है कि आप इसका उपयोग कैसे करते हैं। लोगों को जब भी इस या गोटो / eval / ग्लोबल्स / आदि जैसी चीजों को बंद करने की आवश्यकता होती है। उल्लिखित हैं। साथ ही कह सकते हैं कि "वर्डप्रेस से बचें" या "सीएसएस से बचें" क्योंकि "चीजों को गड़बड़ाने" की क्षमता बहुत महान है।

— Beejor

Answer 2

!importantकेवल आप परस्पर विरोधी के साथ अपने शैली पत्रक में चयनकर्ताओं है जब इस्तेमाल किया जाना चाहिए विशिष्टता ।

लेकिन यहां तक ​​कि जब आपके पास परस्पर विरोधी विशिष्टता होती है, तो अपवाद के लिए अधिक विशिष्ट चयनकर्ता बनाना बेहतर होता है। आपके मामले classमें आपके HTML में ऐसा होना बेहतर है जिसे आप अधिक विशिष्ट चयनकर्ता बनाने के लिए उपयोग कर सकते हैं जिसे !importantनियम की आवश्यकता नहीं है ।

td.a-semantic-class-name { height: 100px; }

मैं व्यक्तिगत रूप से कभी भी !importantअपनी स्टाइल शीट में उपयोग नहीं करता । याद रखें कि सीएसएस में सी कैस्केडिंग के लिए है। उपयोग करने से !importantयह टूट जाएगा।

Comments

यह सच नहीं है। एक !importantस्टाइलशीट में नियम एक में एक सामान्य नियम को पार कर जाएगी styleउदाहरण के लिए, टैग। हालांकि, कुछ स्थितियों में यह दिखाई देगा कि एक अधिक विशिष्ट नियम इसे ओवरराइड करता है। उदाहरण के लिए, यदि आप एक सेट font-size: 24pt !importantपर body, आप अभी भी यह एक साथ ओवरराइड कर सकते हैं font-size: 12ptपर p। इसका कारण यह है कि आप !importantनियम को ओवरराइड नहीं कर रहे हैं, आप निहितार्थ font-size: inheritको ओवरराइड कर रहे हैं p।

— मस्तूल

Answer 3

अस्वीकरण: हर कीमत पर महत्वपूर्ण!

यह एक गंदा, गंदा हैक है, लेकिन आप उस संपत्ति पर एक (महत्वपूर्ण, बिना किसी महत्वपूर्ण) को ओवरराइड कर सकते हैं, जिस पर आप आयातकों को ओवरराइड करने की कोशिश कर रहे हैं, उस संपत्ति पर (अनंत रूप से लंबे समय तक चलने वाले) एनीमेशन का उपयोग करके।

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

Comments

संभावित रूप से उपयोगकर्ता के सीपीयू

— बेरी सिकाला

ऐसा लगता है कि यह चाल अब काम नहीं करती है। फ़ायरफ़ॉक्स 78 और क्रोम 83 पर, बॉक्स अभी भी लाल रंग का है।

— एंडी पैन

Answer 4

ठीक है यहाँ सीएसएस महत्व के बारे में एक त्वरित पाठ है। मुझे आशा है कि नीचे मदद करता है!

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

#P1 .Page {height:100px;}

से अधिक महत्वपूर्ण है:

.Page {height:100px;}

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

td {width:100px !important;}
table tr td .override {width:150px !important;}

आशा है कि ये आपकी मदद करेगा!!!

Comments

दो !importantको फिर से परिभाषित करके ओवरराइड किया जा सकता है .old-class-name {bla bla bla} as .old-class-name.overrided {bla bla bla}<style></style> घटक के ऊपर टैग में , यह मेरे लिए काम है

— तारे कालाजी

Answer 5

जावास्क्रिप्ट का उपयोग कर ओवरराइड करें

$('.mytable td').attr('style', 'display: none !important');

मेरे लिए काम किया।

Comments

मैंने सोचा था कि इनलाइन शैलियों हमेशा एक माता पिता के महत्वपूर्ण को ओवरराइड करती हैं! झंडा।

— जोशुआ रामिरेज़

@JoshuaRamirez नहीं वे वास्तव में एक महत्वपूर्ण ध्वज को ओवरराइड नहीं करते हैं जब तक कि आप महत्वपूर्ण फ्लैग इनलाइन को नहीं डालते हैं

— Cam

यदि आप जेएस का उपयोग करने जा रहे हैं, तो आप पूरी तरह से तत्व को पूरी तरह से हटा सकते हैं, जब तक कि एक दूरस्थ संभावना न हो, आपको इसकी फिर से आवश्यकता होगी। जेएस के माध्यम से महत्वपूर्ण! बस आपको मूल प्रश्न पर वापस लाता है।

— सिल्वरबैकनेट

@SilverbackNet मेरी समझ के अनुसार, JS का उपयोग करना ओवरराइडिंग अधिक सटीक है और आमतौर पर सीएसएस लोड के रूप में काम करता है और सब कुछ लोड होने के बाद JS jquery ब्लॉक लोड करता है। तो, यह सीएसएस अनुक्रमों से स्वतंत्र सीएसएस द्वारा किए गए परिवर्तनों को ओवरराइड करता है।

— मनीष श्रीवास्तव

इस तरह से ओवरराइड करना स्टाइल की विशेषताओं के लिए काम नहीं करता है।

— user2284570

Answer 6

इससे भी मदद मिल सकती है

td[style] {height: 50px !important;}

यह किसी भी इनलाइन शैली को ओवरराइड करेगा

Answer 7

किसी भी मामले में, आप के heightसाथ ओवरराइड कर सकते हैं max-height।

Answer 8

मैं इस का उत्तर जोड़ना चाहूंगा जिसका उल्लेख नहीं किया गया है, जैसा कि मैंने उपरोक्त सभी को बिना किसी लाभ के करने की कोशिश की है। मेरी विशिष्ट स्थिति यह है कि मैं सिमेंटिक-यूई का उपयोग कर रहा हूं, जिसने !importantतत्वों (बेहद कष्टप्रद) पर विशेषताओं का निर्माण किया है । मैंने इसे ओवरराइड करने के लिए सब कुछ करने की कोशिश की, केवल अंत में एक काम किया (jquery का उपयोग करके)। यह इस प्रकार है:

$('.active').css('cssText', 'border-radius: 0px !important');

Comments

यह काम नहीं करता है, मनीष द्वारा उत्तर देखें जो attr('style', ...इसके बजाय उपयोग करता है

— क्रिस्तोफ़ रूसो