2012-10-24 7 views
6

कल मैं इसमें भाग गया: मेरे :hover -स्टेट्स में से एक काम करना बंद कर दिया। मुझे पता चला है कि अगर मैं इसे बदल:क्या कोई बता सकता है कि क्यों "एनएच-चाइल्ड" -इलेक्टर की "होवर" की तुलना में उच्च प्राथमिकता है?

div.item {} 
div.item:hover {} 
div.item:nth-child(even) {} 
इस के लिए

:

div.item {} 
div.item:nth-child(even) {} 
div.item:hover {} 

इसे फिर से काम करता है।

मैंने दोनों मामलों को दिखाने के लिए demo on jsfiddle बनाया है।

क्या कोई समझा सकता है, क्यों :hover -स्टेट चयनकर्ता द्वारा ओवरराइट किया गया है?

उत्तर

11

चयनकर्ताओं के पास specificity है, इसलिए जो अंतिम बार आता है वह प्राथमिकता लेता है।

+0

+1 धन्यवाद श्रृंखला कर सकते हैं, मैं वास्तव में क्या देख रहा था। मैंने सोचा कि छद्म-वर्गों में अभी भी कुछ प्रकार का पदानुक्रम है। – insertusernamehere

+0

@insertusernamehere: नहीं, एकमात्र छद्म वर्ग जो सामान्य गणना से मुक्त है 'है() नहीं, जो इसके तर्क की विशिष्टता को लेता है। इसका अर्थ यह है कि 'नहीं (ई) 'की विशिष्टता': (नहीं) '' 'है। – BoltClock

+0

@ बोल्टक्लॉक आह, इसलिए कम से कम एक अपवाद है। इस अतिरिक्त जानकारी के लिए धन्यवाद। – insertusernamehere

0

बराबर विशिष्टता ओवरराइड करने के लिए आप चयनकर्ताओं

div.container_2 > div:nth-child(even):hover { 
    background: red; 
}​ 
+1

'div.item: nth-child (यहां तक ​​कि): होवर' विशिष्टता बढ़ाने के लिए पर्याप्त है - माता-पिता द्वारा चयन करने की कोई आवश्यकता नहीं है। – BoltClock

+0

@ बोल्टक्लॉक धन्यवाद, आप सही हैं। पहेली में शैली के अंत में मेरा प्लेसमेंट यह दिखाता है कि यह अधिक विशिष्ट था। –

संबंधित मुद्दे