CSS3: ชับเด็ก () เลือก
CSS เตอร์คู่มืออ้างอิงที่สมบูรณ์
ตัวอย่าง
ระบุแต่ละองค์ประกอบ P ตรงกับสีพื้นหลังขององค์ประกอบหลักของสององค์ประกอบย่อย:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
ลอง»
ความหมายและการใช้งาน
: ชับเด็ก (N) ตัวเลือกที่ตรงกับองค์ประกอบหลัก n องค์ประกอบ TH
nได้จำนวนคำหลักหรือสูตร
เคล็ดลับ: ดู ตัวเลือกตัวเลือกที่ตรงกับประเภทเดียวกันของ n-TH พี่น้องพี่น้อง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
ตัวอย่างเพิ่มเติม
ตัวอย่างที่ 1
<p คี่และสามารถนำมาใช้เป็นคำหลักเพื่อให้ตรงกับองค์ประกอบย่อยจะใช้ดัชนีเป็นเลขคี่หรือแม้กระทั่ง (ดัชนีของลูกคนแรกคือ 1) ที่นี่เราระบุสองสีพื้นหลังที่แตกต่างกันสำหรับองค์ประกอบคี่และ P:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
ลอง»
ตัวอย่างที่ 2
โดยใช้สูตรที่ (เป็น + B) คำอธิบาย: ขนาดของตัวแทนของวงจรที่ N เป็นเคาน์เตอร์ (เริ่มต้นที่ 0) และ B จะชดเชย ที่นี่เราดัชนีทั้งหมดมีคูณสามองค์ประกอบ P ระบุสีพื้นหลัง:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
ลอง»