พิวด็อกลาส nth-of-type
พิวด็อกลาส nth-of-type เลือกองค์ประกอบ
ที่เป็นลูกลำดับที่ n ของประเภทที่กำหนด
นั่นคือ ถ้าฉันเขียน h2:nth-of-type(4)
- จะพบ h2 ตัวที่ 4 ในพ่อแม่ (ต่างจาก
nth-child
ซึ่งจะหาเฉพาะ h2 ที่เป็น
องค์ประกอบลำดับที่ 4 ในพ่อแม่)
ไวยากรณ์
cssตัวเลือก:nth-of-type(เลข | odd | even | นิพจน์){
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
| เลข |
จำนวนเต็มบวกเริ่มจาก 1 กำหนดลำดับขององค์ประกอบ
ที่ต้องการเลือก
การนับลำดับองค์ประกอบเริ่มจาก 1
|
odd |
องค์ประกอบลำดับคี่ |
even |
องค์ประกอบลำดับคู่ |
| นิพจน์ |
สามารถเขียนนิพจน์พิเศษด้วยตัวอักษร n
ซึ่งแทนจำนวนเต็มทั้งหมดตั้งแต่ศูนย์ (ไม่ใช่หนึ่ง)
ถึงอนันต์ ดังนั้น 2n - หมายถึงทุกเลขคู่
(เริ่มจากลำดับที่สอง)
ทำความเข้าใจได้อย่างไร? แทนค่าใน n ด้วย
ตัวเลขตั้งแต่ 0 เป็นต้นไป: ถ้า n = 0 แล้ว 2n จะได้ 0 -
ไม่มีองค์ประกอบดังกล่าว (การนับองค์ประกอบเริ่มจาก 1)
ถ้า n = 1 แล้ว 2n จะได้ 2 - องค์ประกอบลำดับที่สอง, ถ้า n = 2,
2n ได้ 4 - องค์ประกอบลำดับที่สี่ ถ้าเขียน 3n - นี่จะ
เป็นทุกองค์ประกอบลำดับที่สาม (เริ่มจากลำดับที่สาม) เป็นต้น
|
ตัวอย่าง
หา h2 ที่เป็น h2 ตัวที่ 2
ในพ่อแม่:
html<div>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
ตัวอย่าง
หา h2 ลำดับคู่ทั้งหมด:
html<div>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
ตัวอย่าง
หา h2 ลำดับคี่ทั้งหมด:
html<div>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
<h2>หัวเรื่อง</h2>
<p>ย่อหน้า</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: