: बनाम के बाद :: बाद


134

क्या सीएसएस 2.1 :afterऔर सीएसएस 3 ::afterछद्म चयनकर्ताओं ( ::afterपुराने ब्राउज़रों में समर्थित नहीं होने के अलावा ) के बीच कोई कार्यात्मक अंतर है ? क्या नए विनिर्देशन का उपयोग करने का कोई व्यावहारिक कारण है?

जवाबों:


133

यह छद्म वर्ग बनाम छद्म तत्व भेद है।

सिवाय के लिए ::first-line, ::first-letter, ::beforeऔर ::after(जबकि और एकल कोलन के साथ इस्तेमाल किया जा सकता है अगर आप IE8 समर्थन की आवश्यकता होती है जो एक छोटे से आसपास किया गया है), छद्म तत्वों की आवश्यकता होती है डबल कोलन।

छद्म कक्षाएं वास्तविक तत्व खुद को चुनते हैं, तो आप उपयोग कर सकते :first-childया :nth-of-type(n)पहले या विशिष्ट के चयन के लिए <p>एक div में है, उदाहरण के लिए।
(और भी तरह वास्तविक तत्वों के राज्यों :hoverऔर :focus।)

छद्म तत्व ऐसे तत्व के उप-भाग को लक्षित करते हैं जैसे ::first-lineया ::first-letter, ऐसी चीजें जो अपने आप में तत्व नहीं हैं।


वास्तव में, यहाँ बेहतर विवरण: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
यहाँ भी: http://www.evotech.net/blogsp7/ 05 / के बाद वी के बाद क्या-है-डबल बृहदान्त्र-अंकन /


6
यह इस भेद के कारण है कि "छद्म चयनकर्ता" (प्रश्न से) एक निरर्थक शब्द है। कभी भी, इसका उपयोग न करें।
BoltClock

1
जब तक आप उन दोनों के बारे में नहीं बोल रहे हैं। या सामान्य शब्दों में।
अल्बर्ट

1
यह सिद्धांत की एक महान व्याख्या है, लेकिन क्या व्यावहारिक मुद्दे पर इसका असर है? क्या वास्तव में सीएसएस 3 विनिर्देश का उपयोग करने का कोई लाभ है कि सीएसएस 2 को समान कार्य किया जाएगा - अधिक ब्राउज़रों में?
DRosenfeld

1
@ मुख्य धन्यवाद - मैं आपकी टिप्पणी को संबोधित करते हुए आपकी सराहना करता हूं। कोई सवाल नहीं है कि CSS3 टैग के लिए समर्थन का मुद्दा (कम से कम यह) अब तक लगभग एक गैर-मुद्दा है।
12:00 पर DRosenfeld

1
@ BorisD.Thaharov विशेष रूप से, आप IE8 के अपवाद के साथ समान व्यवहार के साथ उपयोग कर सकते हैं :afterऔर ::afterपरस्पर विनिमय कर सकते हैं , जो कि प्रश्न नोटों के रूप में एकल बृहदान्त्र की आवश्यकता है।
डोमिनिक

14

CSS चयनकर्ता ::afterकुछ आभासी तत्व हैं जो DOM ट्री में एक स्पष्ट तत्व के रूप में उपलब्ध नहीं हैं। वे "कहा जाता है छद्म तत्वों " और करने के लिए उपयोग किया जाता है सम्मिलित एक तत्व के बाद / पहले कुछ सामग्री (जैसे: ::before, ::after) या कुछ हिस्से का चयन करें एक तत्व के (जैसे: ::first-letter)। वर्तमान में केवल 5 मानक छद्म तत्व हैं after, before, first-letter, first-line, selection:।

दूसरी ओर, वहाँ चयनकर्ताओं "कहा जाता है के अन्य प्रकार हैं छद्म वर्ग है जो एक परिभाषित किया जाता है" विशेष राज्य (के रूप में की तरह एक तत्व की :hover, :focus, :nth-child(n))। ये DOM में किसी मौजूदा तत्व का चयन करेंगे। छद्म वर्ग 30 से अधिक वस्तुओं के साथ एक लंबी सूची है।

प्रारंभ में (CSS2 और CSS1 में), एकल-कोलोन सिंटैक्स का उपयोग छद्म वर्गों और छद्म तत्वों दोनों के लिए किया गया था। लेकिन, CSS3 में ::सिंटैक्स ने :छद्म तत्वों के लिए संकेतन को बेहतर ढंग से अलग करने की जगह ले ली ।

पिछड़े संगतता के लिए, पुराना एकल-कोलोन सिंटैक्स छद्म तत्वों के लिए स्वीकार्य है जैसे :after(ब्राउज़र अभी भी सभी एक सिक्कोल के साथ पुराने सिंटैक्स का समर्थन करते हैं)। केवल IE-8 नए सिंटैक्स का समर्थन नहीं करता है (यदि आप IE8 का समर्थन करना चाहते हैं तो एकल-कॉलन का उपयोग करें)।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.