सीएसएस स्टाइलशीट पदानुक्रम का महत्व

Question

मैंने कुछ Google खोज की हैं और अब तक मुझे कुछ भी नहीं मिला है जो सीएसएस आदेश या महत्व के बारे में मेरे प्रश्न का उत्तर देता है।

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

h1 { font-size: 12pt; } 
h1 { font-size: 14pt; } 

14pt का फ़ॉन्ट आकार प्रस्तुत करेगा। लेकिन यह हमेशा मामला नहीं है। सीएसएस में

<div id="content"> 
    <input class="regular" type="text" /> 
    <input class="regular" type="text" /> 
    <input class="long" type="text" /> 

और उसके बाद: कभी कभी मैं जैसे शैलियों को परिभाषित करना चाहते

#content input { width: 50%; } 
.long { width: 75%; } 

लेकिन यह है कि हमेशा काम नहीं करता। मैं महत्व के क्रम कहाँ देखते हैं क्योंकि विशिष्ट महत्व स्तर है इन सब कर सकते हैं:!

input {} 
#content input {} 
#content input.regular {} 
#content input.long 
input.regular {} 
input.long {} 
.regular {} 
.long {} 

मैं वास्तव में कभी महत्वपूर्ण लिखने के लिए लेकिन अगर मैं विशेष रूप से महत्व के क्रम को समझ नहीं सकता होने पसंद नहीं है, तो कभी कभी मैं आईडी, वर्ग, आदि

Answer 1

अवधि आप के लिए खोज करना चाहते हैं "विशिष्टता" है।

जब आपके पास दो (या अधिक) सीएसएस ब्लॉक होते हैं जिनके चयनकर्ता एक ही तत्व का चयन करते हैं, और दोनों एक ही संपत्ति को सेट करने का प्रयास करते हैं, तो अधिक विशिष्ट चयनकर्ता के साथ ब्लॉक जीत जाता है।

सीएसएस 3 चयनकर्ताओं विशिष्ट जानकारी के विवरण विशिष्टता गणना की जानी चाहिए कि कैसे, और यह काफी पठनीय है:

• http://www.w3.org/TR/css3-selectors/#specificity

वहाँ

भी कर रहे हैं कुछ अच्छे ब्लॉग पोस्ट है कि नियमों भी वर्णन:

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity

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

Answer 2

बदलने के लिए इस मामले यहाँ के लिए है इसलिए आप उस विशेष समस्या नहीं थी कि तुम क्या

#content input { width: 50%; } 
#content .long { width: 75%; } 

कर अपनी ID वाला तत्व का चयन प्राथमिकता दी जाती है है। अपने चयन करने के लिए आईडी जोड़ने और अधिक विशिष्ट किया जा रहा है समस्या

उदाहरण के लिए

का समाधान होगा:

#content input.long { width: 75%; } 

भी

#content .long { width: 75%; } 

Answer 3

आप सीएसएस विशिष्टता का सामना कर रहे और अधिक से अधिक विशिष्ट है। यदि आपके पास एक ही तत्व पर लागू होने वाली दो विरोधी शैलियों हैं, तो एक भारोत्तोलन प्रणाली है जो निर्धारित करती है कि कौन सी शैली जीतती है। आप यहाँ इसके बारे में अधिक पढ़ सकते हैं:

http://css-tricks.com/specifics-on-css-specificity/