2013-01-01 13 views
5

मैं उपयोगकर्ता की विशेषता के प्रतीक के साथ उपयोगकर्ता प्रोफाइल के लिंक टैग करने के लिए :before का उपयोग कर रहा हूं, उदाहरणों में "व्यवस्थापक", "निष्क्रिय उपयोगकर्ता", "नौसिखिया" और अन्य शामिल हैं।क्या होता है यदि एक ही तत्व के कई वर्ग परिभाषित करते हैं: छद्म-तत्व से पहले?

बात यह है कि, एक से अधिक आवेदन करने के लिए यह संभव है।

तो क्या होता है यदि लिंक पर एक से अधिक वर्ग छद्म-तत्व content के साथ परिभाषित करते हैं? क्या सबसे विशिष्ट चयनकर्ता पहले ओवरराइड करता है? या वे दोनों क्रम में दिखाई देते हैं? जो कुछ भी होता है, क्या यह विश्वसनीय व्यवहार है?

+2

अनुभव से, सबसे विशिष्ट ओवरराइड * कम * विशिष्ट; लेकिन मेरे पास कोई चश्मा नहीं है जिसके साथ मैं पुष्टि कर सकता हूं कि * सही * व्यवहार के रूप में; लेकिन ऐसा लगता है कि सीएसएस के सामान्य विशिष्टता नियमों के साथ जुड़ना प्रतीत होता है, मुझे लगता है। –

+0

यह प्रश्न बाहर निकलता है यह प्रश्न दूसरे महीने का एक डुप्लिकेट है जिसे मैंने कई महीने पहले उत्तर दिया था। इसे याद रखने के लिए मेरा बहाना? [यह मूल रूप से एक लाइनर (दो-प्रेषक?) था।] (Http://stackoverflow.com/revisions/11999197/1) मैंने बाद में इस जवाब में अधिकांश जानकारी को पहले के रूप में विलय कर लिया है। – BoltClock

उत्तर

4

सबसे विशिष्ट चयनकर्ता को प्राथमिकता मिलती है। यह CSS2.1 में बताया गया है:

छद्म तत्वों सिर्फ सीएसएस में असली तत्व की तरह व्यवहार के साथ अपवाद नीचे वर्णित और elsewhere.

वास्तविक ब्राउज़र के व्यवहार, जहाँ तक मुझे पता है, इस व्यवहार के संदर्भ में और :after पर a जैसे गैर-प्रतिस्थापित तत्वों पर समर्थित सभी ब्राउज़रों पर भरोसेमंद है, जिसके लिए सीएसएस 2.1 उन छद्म-तत्वों के लिए व्यवहार को परिभाषित करता है, जैसे img जैसे प्रतिस्थापित तत्वों के विपरीत। यह समझ में आता है, क्योंकि यदि एक से अधिक ऐसे छद्म-तत्व उत्पन्न किए जाने थे, तो ब्राउजर को यह नहीं पता होगा कि इसे फ़ॉर्मेटिंग संरचना में कैसे रखा जाना चाहिए।

निम्न उदाहरण में, विशिष्टता और झरना द्वारा, a.inactive:before को प्राथमिकता दी जाएगी और इस लिंक के लिए :before छद्म तत्व मेल खाती सामग्री होगा (के बाद से दोनों चयनकर्ताओं समान रूप से विशिष्ट हैं - एक प्रकार चयनकर्ता, एक वर्ग चयनकर्ता होने और एक छद्म तत्व):

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>

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

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
} 
 

 
a.administrator.inactive:before { 
 
    content: '[Administrator] [Inactive User] '; 
 
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>

+0

धन्यवाद। मैंने सबसे अधिक संयोजनों को पारस्परिक रूप से अनन्य बनाकर और शेष combos के लिए संयुक्त नियम बनाकर मेरी समस्या हल कर दी है। –