CSS :nth-child() 伪类

定義和用法

CSS :nth-child(n)}} ประเภทเรียกศาสตร์เพื่อตรวจสอบ element ที่เป็นลูกเองของ element พ่อที่เป็นอันดับที่ n เป็น element หนึ่งในลูกเองของอันดับ element ที่เป็นนับถอยหลัง

ประเภทเรียกศาสตร์นี้ใช้เพื่อตรวจสอบ element ในลำดับลูกเองของ element พ่อ

n สามารถเป็นเลข/ดัชนี หรือ คำถาม (odd หรือ even) หรือ สูตร (เช่น an + b)

คำเตือน:ดู :nth-of-type() ประเภทเรียกศาสตร์เพื่อเลือก element ที่เป็นลูกเองของ element พ่อตัวเดียวกัน (ชื่อฉาก)ของ n เป็น element หนึ่งในลูกเองของอันดับ element หนึ่ง

ตัวอย่าง

ตัวอย่าง 1

การใช้งาน :nth-child() ประเภทเรียกศาสตร์:

/* คัดเลือก element ที่สี่ในแต่ละกลุ่มเพื่อบรรลุ */
:nth-child(4) {
  background-color: yellow;
}
/* คัดเลือก element ที่แรกในอานุภาพ div แฝด */
div:nth-child(2) {
  background-color: red;
}
/* คัดเลือก element li ที่แรกในรายการ */
li:nth-child(2) {
  background-color: lightgreen;
}

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

ตัวอย่าง 2

odd และ even เป็นคำถามที่สามารถใช้เพื่อตรวจสอบฟอร์มภาษาเกี่ยวกับเดินทางของเดินทาง (เดินทางที่แรกของลูกเองเป็น 1).

ในที่นี้ เรากำหนดสีพื้นหลังแตกต่างกันสำหรับ <p> ที่ดัชนีเป็นชันแบบเทคร์หรือชันแบบแพน:

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

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

ตัวอย่าง 3

ใช้สูตร (an + b) รายละเอียด:a เป็นระยะทางเต็มเปล่า น เป็นทุกจำนวนเต็มบวกที่เริ่มต้นด้วย 0,b เป็นจำนวนเต็มเปล่า

ในที่นี้ เรากำหนดสีพื้นหลังสำหรับทุก <p> ที่ดัชนีเป็นเทคร์เท่ากับ 3 (เลือกเองตัวที่สาม ที่หก ที่เก้า และอื่นๆ):

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

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

ตัวอย่าง 4

ในที่นี้ เรากำหนดสีพื้นหลังสำหรับทุก <p> ที่ดัชนีเป็นเทคร์เท่ากับ 3 จาก 0 แล้วลดไป 1 (เลือกเองตัวแรก ที่สี่ ที่เจ็ด และอื่นๆ):

p:nth-child(3n-1) {
  background-color: red;
}

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

ระบบการเขียน CSS

:nth-child(index ชัน | ชันแบบเทคร์ | ชันแบบแพน an+b) {
  แสดงการประกาศ CSS;
}

รายละเอียดเทคโนโลยี

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางชี้ถึงสำหรับอุปกรณ์ที่สนับสนุนเรียกศาสตร์เพิ่มเติมนี้ในรุ่นเวอร์ชั่นแรก。