मैं विशेष रूप से इस तत्व आईडी को सीएसएस के साथ कैसे लक्षित कर सकता हूं?

Question

<div id=checkout> 
<form id="confirmation" class="center"> 
<p>content</p> 
</form> 
</div> 

मैं एक सीएसएस चयनकर्ता #checkout form.center पहले से ही इस्तेमाल किया जा रहा

मैं पुष्टि फार्म के लिए विशेष रूप से इस ओवरराइड करने के लिए करना चाहते हैं, लेकिन चीजों को लिखने के लिए मैं कोशिश से कोई भी लागू किया मिलता है। मुझे लगता है कि #confirmation form.center या किसी को पहले नियम को सुपरसीड करना चाहिए, लेकिन यह लक्ष्य को भी प्रभावित नहीं करता है। #confirmation उपर्युक्त चयनकर्ता द्वारा ओवरराइड हो जाता है क्योंकि यह विशिष्ट नहीं है।

Answer 1

BoltClock के जवाब पर विस्तार:

प्रत्येक CSS चयनकर्ता एक specificity मूल्य है। प्रत्येक तत्व के लिए, इसके गुणों में से किसी एक के मूल्य के लिए संघर्ष के मामले में, सर्वोच्च विशिष्टता वाले नियम को प्राथमिकता दी जाती है। आम तौर पर, एक सीएसएस चयनकर्ता में अधिक से अधिक जानकारी, इसकी विशिष्टता जितनी अधिक होगी।

इस कारण से, अपने मौजूदा चयनकर्ता (#checkout form.center) के लिए उपयुक्त कुछ आप इसे ओवरराइड करने के लिए सक्षम हो जाएगा जोड़ने:

#checkout form.center { 
    /* your existing CSS */ 
} 

#checkout #confirmation { 
    /* your overrides; this has higher specificity */ 
} 

#checkout form#confirmation { 
    /* this would also work -- even higher specificity */ 
} 

#checkout form#confirmation.center { 
    /* even higher */ 
} 

#checkout form.center p { 
    /* works inside the p only, but also has 
    greater specificity than #checkout form.center */ 
} 

Answer 2

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

#checkout #confirmation 

कारण है कि #confirmation form.center काम नहीं करता है, क्योंकि वह form.center कि एक #confirmation तत्व है, जो नहीं है के भीतर बैठता है का चयन करता है वही। आप इस के बजाय के रूप में यह लिखा होता है:

#checkout form#confirmation.center 

लेकिन उस तरह से overkill है; पहला चयनकर्ता जो सुझाव देता है वह आपके पहले चयनकर्ता को ओवरराइड करने के लिए पर्याप्त विशिष्ट है।