मेरा लक्ष्य सीएसएस को अंतिम रूप से लागू करना है li, लेकिन यह ऐसा नहीं करता है।
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>मैं केवल अंतिम बच्चे का चयन कैसे कर सकता हूं ?
जवाबों:
:last-childPseudoclass अभी भी मज़बूती से ब्राउज़रों में नहीं किया जा सकता। विशेष रूप से, इंटरनेट एक्सप्लोरर संस्करण <9, और सफारी <3.2 निश्चित रूप से इसका समर्थन नहीं करते , हालांकि इंटरनेट एक्सप्लोरर 7 और सफारी 3.2 कर समर्थन :first-childदिलचस्प,।
आपकी सबसे अच्छी शर्त स्पष्ट रूप last-childसे उस आइटम में एक (या समान) वर्ग जोड़ना है , और li.last-childइसके बजाय लागू करना है।
:last-child ।
एक और उपाय जो आपके लिए काम कर सकता है वह है रिश्ते को उलटना। इसलिए आप सभी सूची मदों के लिए सीमा निर्धारित करेंगे। फिर आप पहले आइटम के लिए बॉर्डर को खत्म करने के लिए पहले-बच्चे का उपयोग करेंगे। पहला बच्चा सभी ब्राउज़रों में सांख्यिकीय रूप से समर्थित है (जिसका अर्थ है कि इसे अन्य कोड के माध्यम से गतिशील रूप से नहीं जोड़ा जा सकता है, लेकिन पहला बच्चा CSS2 चयनकर्ता है, जबकि अंतिम बच्चा CSS3 विनिर्देश में जोड़ा गया था)
नोट: यह केवल आपके इच्छित तरीके से काम करता है यदि आपके पास सूची में केवल 2 आइटम हैं जैसे आपके उदाहरण। किसी भी 3 आइटम और उन पर लागू सीमाओं होगा।
अगर आपको लगता है कि आप जावास्क्रिप्ट का उपयोग कर सकते हैं, तो jQuery समर्थन के बाद से last-child, आप jQuery की सीएसएस विधि का उपयोग कर सकते हैं और अच्छी बात यह लगभग सभी ब्राउज़रों का समर्थन करेगा
उदाहरण कोड:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})आप यहाँ के बारे में अधिक जानकारी पा सकते हैं: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')ऐसा करें जिससे आप अपने स्टाइल को अपनी स्टाइलशीट में रख सकें।
div:last-childऔर लोड नहीं करता है div.last-child। ऐसा प्रतीत होता है कि यह :last-childवाक्यविन्यास को अमान्य मानता है और उस छद्म चयनकर्ता के साथ किसी भी वर्ग को लागू नहीं किया जाएगा।
यदि सूची आइटम्स की संख्या निर्धारित है, तो आप आसन्न चयनकर्ता का उपयोग कर सकते हैं, उदाहरण के लिए यदि आपके पास केवल तीन <li>तत्व हैं, तो आप निम्न का चयन कर सकते हैं <li>:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liका चयन करता liहै #navकि बाद में आता है li। आपका चयनकर्ता बस होना चाहिए #nav li + li + li।
यदि आप अपने आप को अक्सर CSS3 के चयनकर्ता चाहते हैं, तो आप हमेशा अपनी साइट पर Selectivizr लाइब्रेरी का उपयोग कर सकते हैं:
यह एक जेएस स्क्रिप्ट है जो CSS3 चयनकर्ताओं के लगभग सभी ब्राउज़रों के लिए समर्थन जोड़ता है जो अन्यथा उनका समर्थन नहीं करेंगे।
<head>IE टैग के साथ इसे अपने टैग में फेंक दें :
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->पिछले बच्चे छद्म वर्ग IE में काम नहीं करता है
एक कक्षा का उपयोग करने के विकल्प के रूप में आप एक विस्तृत सूची का उपयोग कर सकते हैं, बच्चे के तत्वों को एक शैली में और एक बच्चे को दूसरे के पास करने के लिए dd तत्वों की स्थापना कर सकते हैं। आपका उदाहरण बन जाएगा:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}एचटीएमएल:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>न तो विधि दूसरे की तुलना में बेहतर है और यह व्यक्तिगत प्राथमिकता के लिए नीचे है।
उल के तल पर सीमा क्यों नहीं लगाई जाती?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomपर <ul>तत्व या margin-bottomपिछले पर <li>तत्व, यह सही नीचे के वांछित नियुक्ति पिछले नहीं होगा <li>तत्व। अन्यथा, यह एक अच्छा उपाय है।
यदि आप तत्वों को तैर रहे हैं तो आप ऑर्डर को उल्टा कर सकते हैं
अर्थात float: right; बजायfloat: left;
और फिर एक कक्षा के पहले बच्चे का चयन करने के लिए इस विधि का उपयोग करें।
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}यह वास्तव में वर्ग को पिछले उदाहरण पर लागू कर रहा है क्योंकि यह अब उलटा क्रम में है।
यहाँ आप के लिए एक काम कर रहे उदाहरण है:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
:last-child। और यह उत्सुक नहीं है ।:first-childCSS2 का छद्म वर्ग,:last-childCSS3 का छद्म वर्ग है।