विरासत शैलियों से इंजेक्शन एचटीएमएल-डीवी/सीएसएस को कैसे रोकें? (इंटरनेट एक्सप्लोरर)

Question

मैं इंटरनेट एक्सप्लोरर के लिए एक एक्सटेंशन बना रहा हूं जहां मैं वेबपृष्ठों पर सीएसएस-स्टाइल स्पैन टैग इंजेक्शन दे रहा हूं। यदि इस घटक का एक विशिष्ट भाग क्लिक किया गया है, तो एक पॉपअप दिखाया गया है।

यह पॉपअप वास्तव में एक "डीआईवी" है - जो कि मैं सामग्री पृष्ठ के बहुत अंत में इंजेक्शन कर रहा हूं: "बॉडी" -टैग। मेरे पास इस div के अंदर एक सीएसएस-स्टाइल टेबल है, और जिस साइट पर मैं हूं, इस पॉपअप की उपस्थिति या तो विनिर्देश के अनुसार है (चौड़ाई के संबंध में, और इसी तरह)।

मेरे पास सीएसएस की तरह आने पर इतना ज्ञान नहीं है, लेकिन ऐसा इसलिए हो सकता है क्योंकि "पैरेंट" पृष्ठ में पहले से ही "बॉडी", "डीवी" या "टेबल" के लिए कुछ सीएसएस है- मेरे तत्वों द्वारा विरासत में मिला जा रहा है?

यदि ऐसा है, तो क्या इसे रोकने का कोई तरीका है?

Answer 1

इस करने के दो साधन हैं (लेकिन कम से कम), लेकिन वे दोनों थोड़ा गन्दा हैं।

उपयोग अपने स्वयं के सीएसएस (इस तरह से पृष्ठों दो पूरी तरह से अलग वेब पेजों किया जा रहा से अलग होते हैं) के साथ एक iframe।

डाले गए HTML तत्वों को लक्षित करने के लिए बढ़ी विशिष्टता का उपयोग करें।

body { 
    /* targets the 'body', and these styles are inherited by its descendant elements */ 
} 

body div { 
    /* targets all divs that are contained within the 'body' element */ 
} 

body > div { 
    /* targets only divs that are directly contained within the body element */ 
    /* and these styles will/may be inherited by the children of these divs */ 
} 

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

.insertedDiv { 
    /* this will apply to all elements of class 'insertedDiv', but may be overridden */ 
    /* by a more specific id-based selector such as '#container > .insertedDiv' */ 

---

1. लेकिन मैं केवल इस समय इन दोनों के बारे में सोच सकते हैं।

Answer 2

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

आप HTML जो अपने पॉपअप के लिए सभी आवश्यक गुण निर्दिष्ट के साथ सीएसएस इंजेक्षन करने की आवश्यकता होगी। अधिकांश सीएसएस के विपरीत, आप किसी भी डिफ़ॉल्ट को ग्रहण करने में सक्षम नहीं होंगे, आपको अपने div के लिए कुछ भी निर्दिष्ट करना होगा जो पृष्ठ द्वारा ओवरराइड हो सकता है। सुनिश्चित करें कि आप विशेष रूप से अपने सीएसएस में आईडी द्वारा div को संदर्भित करते हैं ताकि यह सुनिश्चित किया जा सके कि आपकी शैलियों पृष्ठ के ऊपर ओवरराइड हो और आप अनजाने में पृष्ठ के स्वरूपण के साथ गड़बड़ न करें।

Answer 3

आपको css reset stylesheet से शुरू करना चाहिए। लेकिन इसे केवल आपके एचटीएमएल को प्रभावित करने के लिए संशोधित किया जाना है। तो यदि आप अपने एचटीएमएल को एक आईडी में "23d4o829" जैसे आईडी में लपेटते हैं तो आप अपनी रीसेट स्टाइल शीट में प्रत्येक नियम को संपादित करने का उपयोग कर सकते हैं, इसलिए यह केवल उस div के भीतर HTML को प्रभावित करता है।

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

html, body { /* some stuff */ } 
table { /* more stuff */ } 

html #23d4o829, body #23d4o829 { /* some stuff */ } 
#23d4o829 table { /* more stuff */ } 

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

संपादित करें: मुझे लगता है कि डेविड थॉमस द्वारा उल्लिखित आईफ्रेम का उपयोग करना बेहतर है।