क्या किसी भी स्टाइलशीट को अनदेखा करने के लिए HTML तत्व बताने का कोई तरीका है?

Question

मैं उस पृष्ठ पर एक ड्रॉप डाउन जोड़ने का प्रयास कर रहा हूं जिसमें पहले से ही वैश्विक "चयन" शैली है। वैश्विक शैली को अनदेखा करने के लिए नई चयन सूची बताने का कोई तरीका है? ग्लोबल स्टाइल का उपयोग करने वाले लगभग 1 से 2 zillion मौजूदा ड्रॉप डाउन हैं, इसलिए मैं मौजूदा एचटीएमएल को रिफैक्टर नहीं करना चाहता हूं।

Answer 1

आप जो पूछ रहे हैं उसे करने का कोई आसान तरीका नहीं है, एक दृष्टिकोण एक सीएसएस क्लास बनाना है जो एक विशिष्ट तत्व और उसके बच्चों के लिए सभी उपयुक्त विशेषताओं को रीसेट करता है, यह एक अच्छा प्रारंभिक बिंदु है Element specific CSS reset

Answer 2

आप की तरह व्यापक शैलियों जोड़ने eaither कर सकते हैं:

#id1 .class1 select

या

.class:width:200px !important

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

Answer 3

आप इस तरह का उपयोग कर एक और शैली ओवरराइड कर सकते हैं, "महत्वपूर्ण!":

a {color: red !important} 

या एक अधिक विशिष्ट चयनकर्ता का उपयोग:

*    // a=0 b=0 c=0 -> specificity = 0 
LI    // a=0 b=0 c=1 -> specificity = 1 
UL LI   // a=0 b=0 c=2 -> specificity = 2 
UL OL+LI  // a=0 b=0 c=3 -> specificity = 3 
H1 + *[REL=up] // a=0 b=1 c=1 -> specificity = 11 
UL OL LI.red // a=0 b=1 c=3 -> specificity = 13 
LI.red.level // a=0 b=2 c=1 -> specificity = 21 
#x34y   // a=1 b=0 c=0 -> specificity = 100 
#s12:not(FOO) // a=1 b=0 c=1 -> specificity = 101 

विशिष्टता प्रलेखन here देखें।

---

अद्यतन:

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

आप एक वैश्विक नियम है:

a {color: blue} 

लेकिन आप अपने लिंक लाल चाहते हैं। तो, आप नीचे दिए गए नियम बनाना चाहिए: वैश्विक नियम भी है, तो

a {color: red !important} 

"! महत्वपूर्ण", आप एक अधिक विशिष्ट चयनकर्ता का उपयोग करना होगा: तो, आप उपयोग कर सकते हैं:

body a {color: red !important} 

Answer 4

I 'डी बी ई आपके चयनकर्ताओं को कम करने के इच्छुक हैं। इसका मतलब है ..

<div class="newbox"> 
    <a href="#">I want this to be different.</a> 
</div> 

सीएसएस:

div.newbox a 
{ 
    color: #888; 
    text-decoration: none; 
} 

Answer 5

आप उस तत्व पर एक अद्वितीय वर्ग या आईडी आप (limited browser support) संपत्ति all का उपयोग करें और unset या initial

के लिए सेट कर सकता है सेट कर सकते हैं मान लिया जाये कुछ

<div class="ignore-css"><div> 

और

.ignore-css{all:unset;} 

Answer 6

या आप कर सकते थे बस ...

<div class="global-css"> 
<div class="ignore-css"> 
<div class="important-css"> 
...... 
</div> 
</div> 
</div> 

जहां

.global-css{ 
    vertical-align: middle; 
} 
.ignore-css 
{ 
    all:unset; 
} 
.important-css{ 
    vertical-align:left !important; 
}