विशेषता चयनकर्ता की विशिष्टता क्या है?

Question

मैं सोच रहा हूं कि विशेषता चयनकर्ता की विशिष्टता क्या है। उदाहरण के लिए:

• आईडी = 100 अंक
• कक्षा = 10 अंक
• एचटीएमएल टैग = 1 बिंदु

उदाहरण:

/* this specificity value is 100 + 10 + 1 = 111 */ 
#hello .class h2 { } 

इस HTML के साथ

:

<div class="selectform"> 
<input type="text" value="inter text"> 
<input type="text" value="inter text" class="inputag"> 
</div> 

इनमें से कौन सा 2 चयनकर्ता अधिक विशिष्ट है?

.selectform input[type="text"] { } 
.selectform .inputbg { } 

चेक डेमो के लिएhttp://tinkerbin.com/IaZW8jbI

Answer 1

गुण चयनकर्ताओं समान रूप से वर्ग चयनकर्ताओं के लिए विशिष्ट हैं।

आपके उदाहरण में, पहला चयनकर्ता अधिक विशिष्ट है क्योंकि एक अतिरिक्त प्रकार चयनकर्ता input है जो इसे दूसरे चयनकर्ता को हरा देता है।

प्रत्येक चयनकर्ता की विशिष्टता calculated इस प्रकार है:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */ 
.selectform input[type="text"] { } 

/* 2 classes     -> specificity = 0-2-0 */ 
.selectform .inputbg { } 

Answer 2

सामान्य तौर पर, चयनकर्ताओं के सभी प्रकार के समान हैं; अभिव्यक्ति में चयनकर्ताओं की संख्या क्या मायने रखती है। तो आईडी = 1, कक्षा = 1, और एचटीएमएल टैग = 1.

यदि दो चयनकर्ताओं की समान विशिष्टता होती है, तो सीएसएस फ़ाइल में आगे बढ़ने वाला एक "जीतता है"। तो सुनिश्चित करें कि आप अपने सीएसएस संदर्भ सामान्य से विशिष्ट तक ऑर्डर करें; jquery-ui.css जैसे पुस्तकालय पहले जाते हैं, जबकि आपकी सीएसएस फ़ाइलें उन के बाद जाती हैं।