เป้าหมายของฉันคือการใช้ CSS ในช่วงสุดท้าย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 ยังไม่สามารถใช้งานได้อย่างน่าเชื่อถือเบราว์เซอร์ โดยเฉพาะอย่างยิ่ง Internet Explorer เวอร์ชัน <9 และ Safari <3.2 ไม่รองรับอย่างแน่นอนแม้ว่า Internet Explorer 7 และ Safari 3.2 จะรองรับ:first-childก็ตาม
ทางออกที่ดีที่สุดของคุณคือเพิ่มlast-childคลาส (หรือที่คล้ายกัน) ลงในรายการนั้นอย่างชัดเจนและใช้li.last-childแทน
:last-child
อีกวิธีหนึ่งที่อาจได้ผลสำหรับคุณคือการย้อนความสัมพันธ์ คุณจึงกำหนดเส้นขอบสำหรับรายการทั้งหมด จากนั้นคุณจะใช้ลูกคนแรกเพื่อกำจัดเส้นขอบสำหรับรายการแรก ลูกคนแรกได้รับการสนับสนุนแบบคงที่ในทุกเบราว์เซอร์ (หมายความว่าไม่สามารถเพิ่มแบบไดนามิกผ่านโค้ดอื่น ๆ ได้ แต่ลูกคนแรกคือตัวเลือก CSS2 ในขณะที่ลูกคนสุดท้ายถูกเพิ่มในข้อกำหนด CSS3)
หมายเหตุ: วิธีนี้ใช้ได้ผลตามที่คุณต้องการก็ต่อเมื่อคุณมีเพียง 2 รายการในรายการเหมือนตัวอย่างของคุณ รายการที่ 3 และบนจะมีการใช้เส้นขอบ
หากคุณคิดว่าคุณสามารถใช้ Javascript ได้เนื่องจากการสนับสนุน jQuery last-childคุณสามารถใช้วิธี css ของ 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 บนไซต์ของคุณได้ตลอดเวลา:
เป็นสคริปต์ JS ที่เพิ่มการรองรับตัวเลือก CSS3 เกือบทั้งหมดให้กับเบราว์เซอร์ที่ไม่รองรับ
โยนลงใน<head>แท็กของคุณด้วยเงื่อนไข IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->คลาสหลอกลูกคนสุดท้ายไม่ทำงานในIE
อีกทางเลือกหนึ่งนอกเหนือจากการใช้ชั้นเรียนคุณสามารถใช้รายการโดยละเอียดการตั้งค่าองค์ประกอบ dt ลูกให้มีลักษณะเดียวและองค์ประกอบ dd ลูกให้มีอีกแบบหนึ่ง ตัวอย่างของคุณจะกลายเป็น:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>ไม่มีวิธีใดดีไปกว่าวิธีอื่นและขึ้นอยู่กับความชอบส่วนบุคคล
อีกวิธีในการทำคือใช้ตัวเลือกลูกสุดท้ายใน jQuery จากนั้นใช้เมธอด. css () เบื่อหน่ายแม้ว่าบางคนยังอยู่ในยุคหินที่ใช้เบราว์เซอร์ที่ปิดใช้งาน JavaScript
ทำไมไม่ใช้เส้นขอบที่ด้านล่างของ UL?
#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;
}นี่เป็นการใช้คลาสกับอินสแตนซ์ LAST เท่านั้นเนื่องจากตอนนี้อยู่ในลำดับที่กลับกัน
นี่คือตัวอย่างการทำงานสำหรับคุณ:
<!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>เป็นการยากที่จะพูดโดยไม่เห็น CSS ที่เหลือของคุณ แต่ลองเพิ่มที่!importantด้านหน้าของสีเส้นขอบเพื่อให้เป็นดังนี้:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-childเช่นกัน และไม่ใช่เรื่องที่น่าสงสัย:first-childคือ CSS2 pseudo-class,:last-childCSS3 pseudo-class