क्या केवल पहले सीधे बच्चे के लिए सीएसएस चयनकर्ता है?

Question

मेरे पास निम्न HTML है

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

और निम्नलिखित शैली:

DIV.section DIV:first-child 
{
  ...
}

किसी कारण से कि मुझे समझ नहीं आ रहा है कि शैली "उप सामग्री 1" के <div> साथ-साथ "हेडर" पर भी लागू हो रही है <div>।

मैंने सोचा था कि शैली पर चयनकर्ता केवल "अनुभाग" नामक एक वर्ग के साथ एक div के पहले प्रत्यक्ष बच्चे पर लागू होगा। मैं जो चाहता हूं उसे पाने के लिए मैं चयनकर्ता को कैसे बदल सकता हूं?

Comments

jsfiddle.net/joelpurra/7t5CK

— जोएल पुर्रा

Answer 1

आपने जो पोस्ट किया है, उसका शाब्दिक अर्थ है "किसी भी विभाग को खोजें जो अनुभाग विभाग के अंदर हैं और अपने माता-पिता की पहली संतान हैं।" उप में एक टैग होता है जो उस विवरण से मेल खाता है।

यह मेरे लिए स्पष्ट नहीं है कि आप मुख्य विभाग के दोनों बच्चों को चाहते हैं या नहीं। यदि ऐसा है, तो इसका उपयोग करें:

div.section > div

यदि आप केवल शीर्ष लेख चाहते हैं, तो इसका उपयोग करें:

div.section > div:first-child

>परिवर्तनों के विवरण का उपयोग करते हुए: "किसी भी divs को खोजें जो अनुभाग div के प्रत्यक्ष वंशज हैं" जो आप चाहते हैं।

कृपया ध्यान दें कि IE6 को छोड़कर सभी प्रमुख ब्राउज़र इस विधि का समर्थन करते हैं। यदि IE6 समर्थन मिशन-क्रिटिकल है, तो आपको चाइल्ड डिव से कक्षाएं जोड़ना होगा और इसके बजाय इसका उपयोग करना होगा। अन्यथा, यह ध्यान देने योग्य नहीं है।

Comments

: पहले बच्चे की आवश्यकता नहीं है, इस मामले में।

— eozzy

ऐसा लगता है कि ओपी चयनकर्ता के बारे में नहीं पूछ रहा है कि सभी बाल डिवीजनों पर नियम क्यों लागू किया जा रहा है।

— डग नीनेर

मेरी व्याख्या यह है कि उसे सीएसएस वंशानुक्रम की अवधारणा मिलती है, और सोचा कि पहले बच्चे पर इसका प्रभाव होगा>>। यह बल्कि अस्पष्ट शब्दांकन है।

— माचिस

आह, 'डायरेक्ट डिसेंटेंट' चयनकर्ता आपकी सभी समस्याओं को हल करेगा, यह याद रखने के लिए पर्याप्त पुराना होने के कारण, लेकिन आप इसका उपयोग नहीं कर सकते क्योंकि यह IE में काम नहीं करता था । बहुत अनावश्यक हताशा तो सुनिश्चित किया जाएगा।

— अरोठ

यह एफआईआर बच्चे के पहले बच्चे पर भी लागू होता है। अगर वास्तव में केवल पहले बच्चे पर परिवर्तनों को लागू करने की आवश्यकता है, तो हमें बच्चे के बच्चों पर परिवर्तनों को रद्द करना होगा। कुछ इस तरह:div.section > div:first-child > div { /* Cancel Changes*/}

— Mahdi J.Ansari

Answer 2

यह प्रश्न Google पर खोजा गया। यह कक्षा के साथ एक तत्व के पहले बच्चे को वापस कर देगा container, भले ही वह किस प्रकार का बच्चा हो।

.container > *:first-child
{
}

Answer 3

सीएसएस को कैस्केडिंग स्टाइल शीट्स कहा जाता है क्योंकि नियम विरासत में मिले हैं। निम्नलिखित चयनकर्ता का उपयोग करना, होगा माता पिता की सिर्फ प्रत्यक्ष बच्चे का चयन करें, लेकिन अपने नियमों में किया जाएगा विरासत में मिला है कि द्वारा divकी बच्चों divs:

div.section > div { color: red }

अब, वह div और उसके बच्चे दोनों होंगे red। यदि आप इसे विरासत में नहीं चाहते हैं तो आपको माता-पिता पर जो कुछ भी निर्धारित करना है उसे रद्द करने की आवश्यकता है:

div.section > div { color: red }
div.section > div div { color: black }

अब केवल वह एकल divजो कि सीधा बच्चा div.sectionहै लाल होगा, लेकिन उसके बच्चे divsअभी भी काले होंगे।

Answer 4

div.section > div

Answer 5

का उपयोग करें div.section > div।

बेहतर अभी तक, <h1>शीर्षक और div.section h1अपने CSS में टैग का उपयोग करें, ताकि पुराने ब्राउज़रों का समर्थन करें (जो कि इसके बारे में नहीं जानते हैं >) और अपना मार्कअप शब्दार्थ रखें।

Comments

अच्छा विचार, दुर्भाग्य से मुझे IE6 का भी समर्थन करने की आवश्यकता है, और अगर मैं h1 का उपयोग करता हूं, तो मुझे फॉन्ट-साइज़ को इनहेरिट करने के लिए सेट करना होगा ताकि फॉन्ट शरीर के मेल खाता हो, और यानी 7 और नीचे वाले इनहेरिट का समर्थन न करें। आर्ग!

— जेरेमी

इसके अलावा, मेरे पास चाइल्ड डीवीज़ हैं और एच 1 में चाइल्ड डीवाईज़ डालने से नियम टूटते हैं, भले ही IE इसे रेंडर करता है, मुझे यकीन नहीं है कि अन्य ब्राउज़र क्या करते हैं

— जेरेमी

Answer 6

आपके मामले में प्रत्यक्ष पहले बच्चे के लिए सीएसएस चयनकर्ता है:

.section > :first-child

प्रत्यक्ष चयनकर्ता है> और पहला बच्चा चयनकर्ता है: पहला बच्चा

इससे पहले कि दूसरों के सुझाव के अनुसार तारांकन की आवश्यकता न हो। आप टैग को पूर्वनिर्मित करके इस समाधान को संशोधित करके DOM खोज को गति दे सकते हैं:

div.section > :first-child