pseudo-class :nth-last-child() ของ CSS

คำนิยามและการใช้งาน

CSS :nth-last-child(n) pseudo-class ใช้ต่อยอดลูกที่เป็นอันดับที่ตัวเลขที่เรียงลงท้ายของพ่อที่กำหนด ไม่ว่าชนิดใดก็ตาม

n เป็นตัวเลข/ดัชนี หรือ คำที่ใช้เพื่อต่อยอด (odd หรือ even) หรือ สูตร (เช่น an + b)

คำแนะนำ:ดู :nth-last-of-type() pseudo-class ใช้เลือกลูกที่เป็นอันดับที่ตัวเลขที่เรียงลงท้ายของพ่อที่กำหนด n อันดับของลูกของมัน

ตัวอย่าง

ตัวอย่าง 1

กำหนดสีพื้นหลังสำหรับ <p> ที่เป็นลูกของอันดับที่สองของอันดับท้ายของพ่อของมัน

p:nth-last-child(2) {
  background-color: red;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

odd และ even เป็นคำที่ใช้เพื่อต่อยอดที่เป็นเลขเศษหรือเลขเต็ม

ที่นี่ เรากำหนดสีพื้นหลังสำหรับ <p> ที่มีดัชนีเรียงลงท้ายเป็นเลขเศษและเลขเต็ม

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้สูตร (an + b): รายละเอียด:a แสดงว่าเป็นออฟเซ็ทตัวเลข น คือทั้งหมดตัวเลขเป็นจำนวนเต็มที่เริ่มต้นด้วย 0b เป็นออฟเซ็ทตัวเลข

ที่นี่ เรากำหนดสีพื้นหลังสำหรับทั้งหมด <p> ที่มีดัชนีเรียงลงท้ายที่เป็นเลขเต็มตัวเลขที่สามเท่า

p:nth-last-child(3n+0) {
  background-color: red;
}

ทดลองด้วยตัวเอง

CSS ภาษา

:nth-last-child(index | ชันษา | ชันษาแบบเศษ | an+b) {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪类的首个浏览器版本。