सीएसएस शैली ओवरराइट ऑर्डर?

Question

खैर मैं 2 सीएसएस

<link href="Styles/layout.css" rel="stylesheet" type="text/css" /> 
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" /> 

शामिल है layout.css

Table.infoBox tr td table tr td 
{ 
    padding: 0px; 
    border: 0px; 
} 

ATJournal.css

table.ATJMainTable tr td 
{ 
    border: 1px solid black; 
    padding: 3px; 
} 

और फिर हम इस तालिका

<Table class="infoBox"> 
    <tr> 
     <td> 
     <table class="ATJMainTable"> 
      <tr> 
       <td> 
        some text! 
       </td> 
      </tr> 
     </table> 
    </tr> 
</table> 

क्यों है layout.css इस मामले में ATJournal.css ओवरराइट करें?

अभी भी ATJournal.css अधिलेखित कर देता है यहां तक ​​कि अगर मैं बदल सीएसएस के आदेश "layout.css" भी शामिल है ....

Answer 1

चयनकर्ता अधिक विशिष्ट है।

Table.infoBox tr td table tr td 

एक टेबल के अंदर टीडी कोशिकाओं को स्टाइल कर रहा है जो इन्फोबॉक्स के साथ वर्गीकृत तालिका के अंदर है।

table.ATJMainTable tr td 

विशिष्टता ओवरराइड करने के लिए

आप इस्तेमाल कर सकते हैं ATJMainTable

के साथ वर्गीकृत एक तालिका के अंदर टीडी कोशिकाओं स्टाइल है महत्वपूर्ण है, या आप की तरह कुछ कर सकते हैं:

table.infoBox tr td table.ATJMainTable tr td 

विशेष रूप से उस टुकड़े ओवरराइड करने के लिए ।

वैकल्पिक रूप से, क्या आप इन्फोबॉक्स चयनकर्ता को कम विशिष्ट होने के लिए कम कर सकते हैं?

Answer 2

यह एक अधिक विशिष्ट चयनकर्ता है।

here देखें।

Answer 3

आप वास्तव में निर्दिष्ट कर सकते हैं कि !important का उपयोग करके कौन सा नियम जीतता है।

table.ATJMainTable tr td 
{ 
    border: 1px solid black !important; 
    padding: 3px !important; 
} 

यह मूलतः ब्राउज़र बताता है, कि यह सुनिश्चित करें कि इस नियम सबसे महत्वपूर्ण नियम है और अन्य सभी इस नियम के पक्ष में सोपानी किया जाना चाहिए बनाना चाहिए।

चेतावनी: आप इसे कम से कम उपयोग करना चाहते हैं क्योंकि यदि आप इसे बहुत अधिक उपयोग करते हैं तो इसे ट्रैक करना मुश्किल होता है।