सीएसएस पहले बच्चे और अंतिम बच्चे एक ही तत्व

Question

पर उपयोग किए जाने पर काम नहीं करते हैं, मैंने अभी देखा है कि सीएसएस :first-child और :last-child उसी तत्व पर उपयोग किए जाने पर काम नहीं करते हैं। केवल एक का उपयोग किया जाता है। मैं सोच रहा हूं कि ऐसा क्यों है और यदि सीएसएस में कोई कामकाज है? यह मुझे सीएसएस बग की तरह लगता है - पहला तत्व भी अंतिम तत्व हो सकता है।

मुझे उस विषय पर Google में कुछ भी नहीं मिला। प्रत्येक ट्यूटोरियल मानता है कि कम से कम 2 तत्व होंगे।

मुझे कुछ ऐसा दिख रहा है: "पहला बच्चा भी अंतिम बच्चा है" चयनकर्ता। क्या यह अस्तित्व में है?

Answer 1

मुझे आश्चर्य है कि ऐसा क्यों है और यदि सीएसएस में कोई कामकाज है? यह मुझे सीएसएस बग की तरह लगता है - पहला तत्व भी अंतिम तत्व हो सकता है।

यह एक बग नहीं है। कैस्केड कैसे काम करता है: यदि कोई तत्व पहला बच्चा और आखिरी बच्चा दोनों है, तो यदि आपके पास :first-child और :last-childअलग नियमों में हैं और वे दोनों एक ही तत्व से मेल खाते हैं, तो बाद में घोषित या अधिक विशिष्ट नियम में कुछ भी होगा दूसरे को ओवरराइड करें।

आप border-radius आशुलिपि संपत्ति के साथ इस व्यवहार here का एक उदाहरण मिल सकते हैं, और समाधान है कि घटक गुण का उपयोग शामिल है आशुलिपि के बजाय, और साथ ही एक अलग नियम पूरी तरह निम्नलिखित चयनकर्ताओं से एक का उपयोग निर्दिष्ट करने ...

मुझे कुछ ऐसा दिख रहा है: "पहला बच्चा भी अंतिम बच्चा" चयनकर्ता है। क्या यह अस्तित्व में है?

सचमुच, क्या तुम करोगी श्रृंखला जो दोनों ठीक काम करता है इस तरह छद्म कक्षाएं,:

:only-child 

:

:first-child:last-child 

लेकिन वहाँ एक विशेष छद्म वर्ग है कि एक ही तरह से कार्य करता है मौजूद है मुख्य अंतर (वास्तव में, केवल अंतर) इन दो चयनकर्ताओं के बीच विशिष्टता है: पहला एक अधिक विशिष्ट है क्योंकि इसमें एक अतिरिक्त छद्म-वर्ग होता है। ब्राउज़र समर्थन में कोई अंतर नहीं है, क्योंकि :last-child और :only-child दोनों ब्राउज़र के सटीक संस्करणों द्वारा समर्थित हैं।

Answer 2

मुझे एहसास है कि मैं इसके लिए काफी देर से हूं, लेकिन आप सीएसएस के :first-of-type और :last-of-type का भी उपयोग कर सकते हैं। उदाहरण के लिए:

<blockquote> 
    <p>Some text you want to quote</p> 
</blockquote> 

यह सीएसएस अनुच्छेद पर उद्धरण जोड़ देगा:

blockquote{ 
    quotes: "“" "”" "‘" "’"; 
} 

blockquote p:first-of-type:before{ 
    content:open-quote; 
} 

blockquote p:last-of-type:after{ 
    content:close-quote; 
}