ตัวสร้าง CSS :nth-child()
สร้างสูตร :nth-child, :nth-of-type และ An+B พร้อมกริดที่แสดงรายการที่ตรง คัดลอก CSS ในเบราว์เซอร์ ฟรีและเป็นส่วนตัว
Loading tool...
ตัวสร้าง CSS :nth-child() คืออะไร?
ตัวสร้าง CSS :nth-child() เป็นเครื่องมือฟรีในเบราว์เซอร์ที่สร้าง selector แบบ An+B และแสดง sibling ที่ตรงบนกริดสด
ประโยชน์หลัก
- ตรวจลายทางม้าลาย ทุกตัวที่ n และ n ตัวแรกก่อนแก้ CSS
- เปรียบเทียบการนับแบบ child กับ of-type ในลิสต์เดียวกัน
- พรีวิวการกรอง of() ตาม Selectors Level 4
- คัดลอก CSS rule ได้โดยไม่ต้องออกจากหน้า
กรณีการใช้งาน
- •จัดสไตล์แถวตารางหรือรายการสลับสี
- •ไฮไลต์การ์ดสามใบแรกในกริด
- •เลือกไทล์สินค้าทุกตัวที่สาม
- •เรียน notation An+B พร้อมฟีดแบ็กภาพทันที
วิธีใช้ตัวสร้าง CSS :nth-child()
- เลือกสูตร: เลือกพรีเซ็ต เช่น odd หรือ 3 ตัวแรก หรือพิมพ์สูตร An+B เช่น 3n+1
- เลือก pseudo-class: เลือก :nth-child, :nth-of-type หรือแบบ last-child ตามวิธีที่ต้องการนับ sibling
- ดูกริด: ดูพรีวิวสดที่ไฮไลต์รายการที่ตรง แล้วปรับจำนวนรายการได้ตามต้องการ
- คัดลอก CSS: ตั้ง base selector และประกาศ แล้วคัดลอก rule ไปใส่ stylesheet
คุณสมบัติหลัก
- พาร์เซอร์ An+B สำหรับ odd, even, จำนวนเต็ม และสูตรอย่าง 3n+1
- กริดตัวเลขสดแสดง sibling ที่ตรงสูตร
- รองรับ :nth-child, :nth-of-type, :nth-last-child และ :nth-last-of-type
- ตัวกรอง of() ตาม Selectors Level 4
- คัดลอก CSS rule พร้อมประกาศที่กำหนดเอง
คำถามที่พบบ่อย
An+B ใน :nth-child หมายถึงอะไร?
A คือขนาดรอบ และ B คือออฟเซ็ต เบราว์เซอร์ทดสอบตำแหน่ง sibling 1, 2, 3, ... กับ A คูณ n บวก B โดย n เริ่มที่ 0 โดย odd คือ 2n+1 และ even คือ 2n
:nth-of-type ต่างจาก :nth-child อย่างไร?
:nth-child นับทุก sibling ส่วน :nth-of-type นับเฉพาะองค์ประกอบที่แท็กเดียวกัน ดังนั้น span ท่ามกลาง div จะมีลำดับของตัวเอง
ตัวกรอง of() ทำอะไร?
ใน Selectors Level 4, :nth-child(2n of .featured) นับเฉพาะ sibling ที่ตรง .featured แล้วจึงใช้ An+B กับรายการที่กรองแล้ว เครื่องมือนี้จะจางรายการที่ไม่ตรงในพรีวิว
CSS ของฉันถูกอัปโหลดหรือไม่?
ไม่ การแปลงสูตรและกริดพรีวิวทำงานในเบราว์เซอร์ทั้งหมด ไม่มีการส่งข้อมูลไปเซิร์ฟเวอร์