: पहला बच्चा अपेक्षित काम नहीं कर रहा है

मैं के अंदर के अंदर detail_container नामक कक्षा के साथ पहले h1 का चयन करने का प्रयास कर रहा हूं। यह काम करता है अगर h1 इस div के भीतर पहला तत्व है, लेकिन यदि यह ul के बाद आता है तो यह काम नहीं करेगा।: पहला बच्चा अपेक्षित काम नहीं कर रहा है

<style type="text/css"> 
.detail_container h1:first-child 
{ 
color:blue; 
} 
</style> 
</head> 
<body> 
<div class="detail_container"> 
    <ul> 
    <li></li> 
    <li></li> 
    </ul> 
    <h1>First H1</h1> 
    <h1>Second H1</h1> 
</div> 
</body> 
</html>

मैं यह धारणा थी कि सीएसएस मैं पहले h1 कोई फर्क नहीं पड़ता का चयन करेंगे जहां यह इस div में है। मैं इसे कैसे कारगर बना सकता हूं?

स्रोत

2010-12-22 The Muffin Man

जो भी सीएसएस नहीं कर सकता, जावास्क्रिप्ट कर सकते हैं। – JCOC611

यह कुछ ऐसा है जो आप CSS3 के साथ कर सकते हैं :) – BoltClock

152

h1:first-child चयनकर्ता का मतलब

अपनी मूल
तभी यह एक h1 तत्व है कि अगर के पहले बच्चे का चयन करें।

कंटेनर यहाँ की :first-childul है, और इस तरह के रूप h1:first-child संतुष्ट नहीं कर सकते।

CSS3 अपने मामले के लिए के :first-of-type है:

.detail_container h1.first 
{ 
    color: blue; 
}

स्रोत

2010-12-22 02:37:10 BoltClock

अब मैं समझता हूं, हालांकि मुझे लगता है कि जब वे मानक बनाते हैं तो उन्हें दोनों संस्करणों को लागू करना चाहिए था। –

आईई 9 रिलीज में काम नहीं कर रहा है। यह कहता है एच 1: डेवलपर टूल – Cine

में अज्ञात [संगतता सूची] (http://www.quirksmode.org/css/contents.html#t34) ': first-of-type' selector का अज्ञात। –

:first-child पहले h1यदि और केवल यदि यह अपनी मूल तत्व का पहला बच्चा है चयन करता है। आपके उदाहरण में, uldiv का पहला बच्चा है।

छद्म वर्ग का नाम कुछ भ्रामक है, लेकिन यह spec में स्पष्ट रूप से here समझाया गया है।

jQuery का :first चयनकर्ता आपको वह चीज़ देता है जो आप खोज रहे हैं। आप ऐसा कर सकते हैं:

$('.detail_container h1:first').css("color", "blue");

स्रोत

2010-12-22 02:35:23

तो मैं यह कैसे कर सकता हूं? –

आपका अधिकार यह भ्रामक है, मैं मुख्य रूप से भ्रमित हो गया क्योंकि मैंने पहले ऐसा करने के लिए jQuery का उपयोग किया है। –

.detail_container h1:first-of-type 
{ 
    color: blue; 
}

लेकिन ब्राउज़र संगतता संकट और whatnot के साथ, आपको पहले h1 एक वर्ग दे रही है, तो उस वर्ग को लक्षित कर बेहतर कर रहे हैं

उस विशेष मामले के लिए आप इसका उपयोग कर सकते हैं:

.detail_container > ul + h1{ 
    color: blue; 
}

लेकिन यदि आपको कई मामलों पर उसी चयनकर्ता की आवश्यकता है, तो आपके पास उन लोगों के लिए कक्षा होनी चाहिए, जैसे बोल्टक्लॉक ने कहा।

स्रोत

2010-12-22 23:19:23 Grekz

अच्छा काम! - इस पर ब्राउज़र स्वीकृति कैसे है? –

आपको कोई समस्या नहीं होनी चाहिए। यहां रेफरी http://www.w3.org/TR/CSS2/selector.html#child- चयनकर्ता – Grekz

आप अपने h1 टैग को अन्य div में लपेट सकते हैं और फिर पहला first-child होगा। div शैलियों की भी आवश्यकता नहीं है। यह उन बच्चों को अलग करने का एक तरीका है।

<div class="h1-holder"> 
    <h1>Title 1</h1> 
    <h1>Title 2</h1> 
</div>

स्रोत

2012-05-09 16:47:41 GhostToast

आप भी उपयोग कर सकते हैं

.detail_container h1:nth-of-type(1)

किसी अन्य नंबर पर आप किसी भी अन्य h1 आइटम का चयन कर सकते हैं द्वारा नंबर 1 बदल कर।

स्रोत

2014-03-14 08:37:05 user3419033

: पहला बच्चा अपेक्षित काम नहीं कर रहा है

उत्तर

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