การใช้: nth-type-type (n) ด้วยตาราง
เพื่อให้ตารางง่ายต่อการอ่านจึงมักเป็นประโยชน์ในการจัดแถวที่มีสีพื้นสลับกัน หนึ่งในวิธีที่นิยมมากที่สุดในการกำหนดตารางคือตั้งค่าสีพื้นหลังของแถวอื่น ๆ ทั้งหมด นี้มักจะเรียกว่า "ลายม้าลาย"
คุณสามารถทำได้โดยการตั้งค่าแถวอื่น ๆ ทั้งหมดที่มีคลาส CSS และกำหนดสไตล์สำหรับคลาสนั้น นี้ทำงาน แต่ไม่ได้เป็นวิธีที่ดีที่สุดหรือมีประสิทธิภาพมากที่สุดเพื่อไปเกี่ยวกับเรื่องนี้
เมื่อใช้วิธีนี้ทุกครั้งที่คุณต้องแก้ไขตารางนั้นคุณอาจต้องแก้ไขทุกแถวเดียวในตารางเพื่อให้แน่ใจว่าแต่ละแถวสอดคล้องกับการเปลี่ยนแปลง ตัวอย่างเช่นถ้าคุณแทรกแถวใหม่ลงในตารางแถวอื่น ๆ ที่ด้านล่างจำเป็นต้องมีการเปลี่ยนแปลงชั้นเรียน
CSS ทำให้ง่ายต่อการจัดตารางที่มีลายม้าลาย คุณไม่จำเป็นต้องเพิ่มแอตทริบิวต์ HTML หรือคลาส CSS เพิ่มเติมคุณเพียงแค่ใช้ ตัวเลือก CSS nth-of-type (n)
ตัวเลือก nth-of-type (n) เป็นโครงสร้างแบบหลอกใน CSS ซึ่งช่วยให้คุณสามารถกำหนดองค์ประกอบตามความสัมพันธ์กับองค์ประกอบหลักและองค์ประกอบของพี่น้องได้ คุณสามารถใช้เพื่อเลือกองค์ประกอบอย่างน้อยหนึ่งรายการตามลำดับแหล่งที่มา กล่าวคือสามารถจับคู่องค์ประกอบทุกตัวที่เป็นลูกที่ nth ชนิดใดชนิดหนึ่งของ parent
ตัวอักษร n สามารถเป็นคำหลัก (เช่นคี่หรือคู่) ตัวเลขหรือสูตรก็ได้
ตัวอย่างเช่นในการจัดรูปแบบแท็กวรรคอื่น ๆ ทั้งหมดด้วยสีพื้นหลังสีเหลืองเอกสาร CSS ของคุณจะรวมถึง:
p: nth-of-type (แปลก) {
พื้นหลัง: สีเหลือง;
}
เริ่มต้นด้วยตาราง HTML ของคุณ
ขั้นแรกให้สร้างตารางตามปกติโดยเขียนเป็น HTML อย่าเพิ่มชั้นเรียนพิเศษลงในแถวหรือคอลัมน์
ในสไตล์ชีตของคุณเพิ่ม CSS ต่อไปนี้:
tr: nth-of-type (แปลก) {
สีพื้นหลัง: # CCC;
}
ซึ่งจะทำให้ทุกแถวอื่น ๆ มีสีพื้นหลังสีเทาโดยเริ่มจากแถวแรก
คอลัมน์สลับรูปแบบในลักษณะเดียวกัน
คุณสามารถทำรูปแบบเดียวกันกับคอลัมน์ในตารางของคุณได้ เมื่อต้องการทำเช่นนี้เพียงแค่เปลี่ยน tr ในคลาส CSS ของคุณเพื่อ td ตัวอย่างเช่น:
td: nth-of-type (แปลก) {
สีพื้นหลัง: # CCC;
}
ใช้สูตรในตัวเลือกลำดับที่ n (n)
ไวยากรณ์สำหรับสูตรที่ใช้ใน selector คือ a + b
a คือจำนวนที่แสดงถึงขนาดของวัฏจักรหรือดัชนี
n เป็นตัวอักษร "n" และหมายถึงตัวนับซึ่งมีดาวอยู่ที่ 0
+ เป็นโอเปอเรเตอร์ซึ่งอาจเป็น "-"
b เป็นจำนวนเต็มและแสดงค่าออฟเซ็ต - ตัวอย่างเช่นมีกี่แถวที่ตัวเลือกจะเริ่มใช้สีพื้นหลัง นี่เป็นสิ่งที่จำเป็นหากมีโอเปอเรเตอร์อยู่ในสูตร
ตัวอย่างเช่นถ้าคุณต้องการกำหนดสีพื้นหลังสำหรับทุกแถวที่ 3 สูตรของคุณจะเป็น 3n + 0 CSS ของคุณอาจมีลักษณะดังนี้:
tr: nth-of-type (3n + 0) {
พื้นหลัง: slategray;
}
เครื่องมือที่เป็นประโยชน์สำหรับการใช้ตัวเลือกลำดับที่ n ประเภท
ถ้าคุณรู้สึกแย่ลงเล็กน้อยจากลักษณะสูตรในการใช้ตัวเลือก nth-of-type แบบหลอกให้ลองใช้: nth Tester site เป็นเครื่องมือที่มีประโยชน์ซึ่งสามารถช่วยคุณกำหนดไวยากรณ์เพื่อให้ได้รูปลักษณ์ที่คุณต้องการ ใช้เมนูแบบเลื่อนลงเพื่อเลือกประเภทที่อยู่ในประเภท n (คุณสามารถทดสอบกับห้องเรียนหลอกอื่น ๆ ได้เช่นกันเช่นเด็ก nth)