सीएसएस विशिष्टता - "यह" कैसे तय करती है कि कौन सी शैलियों को लागू करना है?

Question

संक्षेप में, सीएसएस कैसे निर्धारित करता है कि एक शैली को दूसरे पर कब लागू किया जाए?

पिछले वर्ष में, मैं बहुत सारी जावास्क्रिप्ट के साथ काम कर रहा हूं और jQuery में उपयोग किए गए सीएसएस आधारित चयनकर्ताओं ने मुझे यह जानने के लिए प्रेरित किया कि वे कैसे काम करते हैं। मैं W3 CSS3 selectors document के माध्यम से कुछ बार गया हूं, और इससे मुझे यह समझने में मदद मिली है कि jQuery में सीएसएस चयनकर्ताओं का बेहतर उपयोग कैसे किया जाए, लेकिन वास्तव में मुझे यह समझने में मदद नहीं मिली है कि एक सीएसएस नियम दूसरे पर लागू होगा।

मैं आपको एक उदाहरण दिखाऊंगा जो मुझे समझ में नहीं आता है।

मैं निम्न HTML है:

<div class='item'> 
    <a>Link 1</a> 
    <a class='special'>Link 2</a> 
</div> 

मैं है निम्नलिखित सीएसएस:

.item a { 
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    font-size: 1em; } 

.special { 
    text-decoration: underline; 
    color: red; 
    font-weight: normal; 
    font-size: 2em; } 

ऊपर देखते हुए दोनों लिंक 1 लिंक 2 और स्टाइल हो जाएगा एक ही है, द्वारा निर्धारित .item a सीएसएस। .special से जुड़ी शैली लिंक 2 के लिए प्राथमिकता क्यों नहीं लेती है?

जाहिर है, मैं इस तरह उसके चारों ओर प्राप्त कर सकते हैं:

.special { 
    text-decoration: underline !important; 
    color: red !important; 
    font-weight: normal !important; 
    font-size: 1em !important; } 

लेकिन, मुझे लगता है कि एक हैक मैं समझ की मेरी कमी के कारण में छिड़क करना है की तरह। जब मैं !important का उपयोग करता हूं, तो मुझे लगता है कि एक नशे की लत की एक छोटी सी मात्रा में एक व्यसन पदार्थ को फिसल रहा है, जो खुद को बता रहा है कि अच्छा छोड़ने से पहले "एक-आखिरी बार" को शामिल करना ठीक है।

इसके अतिरिक्त, अगर मैं वास्तव में सीएसएस सीखना चाहता हूं, तो सिफारिश करने के लिए कोई उत्कृष्ट पुस्तकें हैं?

Answer 1

यह IDs, classes और tags पर आधारित है।

.item a  == 0 1 1  0 (id) 1 (class=item) 1 (tag=a) 
.special == 0 1 0 
#foo  == 1 0 0 
#foo .bar a == 1 1 1 
#foo #bar == 2 0 0 

में सर्वाधिक जीत हासिल :) यदि यह एक टाई है है, जो भी है, जो भी एक आखिरी में दस्तावेज़ जीतता आता है: IDs उच्चतम विशिष्टता, तो classes तो tags, इसलिए की है। ध्यान दें कि 1 0 0 धड़कता 0 1000 1000

आप .special लागू करना चाहते हैं, तो यह अधिक विशिष्ट बनाने: .item a.special

Answer 2

http://www.w3.org/TR/CSS21/cascade.html#specificity आधिकारिक विशिष्टता विनिर्देश है।

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

संपादित करें: ओह, मुझे लगता है कि आपके लिंक की मेरी जानकारी एक ही है। उसके लिए माफ़ करना।

Answer 3

मैं आपको भविष्य में संदर्भ के लिए this से परिचित होने का सुझाव दूंगा। इस विशेष मामले के लिए, ध्यान दें बिंदु 3 व्यापक आदेश के तहत:

1. गणना आईडी की संख्या चयनकर्ता में जिम्मेदार बताते हैं।
2. चयनकर्ता में क्लास विशेषताओं की संख्या की गणना करें।
3. चयनकर्ता में HTML टैग नामों की संख्या की गणना करें। जबकि .special केवल एक वर्ग विशेषता है

इन अपने कोड के लिए लागू कर रहे हैं, .item a, 1 वर्ग विशेषता +1 एचटीएमएल टैग नाम है। इसलिए, पूर्व को विशेष लिंक बनाने का अधिकार जीतता है।