ການນໍາໃຊ້: nth-of-type (n) ມີຕາຕະລາງ
ເພື່ອເຮັດໃຫ້ຕາຕະລາງງ່າຍຕໍ່ການອ່ານ, ມັນມັກຈະຊ່ວຍໃຫ້ແຖວຮູບແບບທີ່ມີສີພື້ນຖານສະຫລັບ. ຫນຶ່ງໃນວິທີການທົ່ວໄປທີ່ສຸດໃນຕາຕະລາງແບບແມ່ນການກໍານົດສີພື້ນຫລັງຂອງແຖວອື່ນໆ. ນີ້ແມ່ນມັກຈະເອີ້ນວ່າ "ເສັ້ນດ່າງດ້າວ."
ທ່ານສາມາດປະສົບຜົນສໍາເລັດນີ້ໄດ້ໂດຍການຕັ້ງທຸກແຖວອື່ນທີ່ມີຊັ້ນຮຽນ CSS ແລະຫຼັງຈາກນັ້ນກໍານົດແບບສໍາລັບຊັ້ນຮຽນນັ້ນ. ນີ້ເຮັດວຽກແຕ່ບໍ່ແມ່ນວິທີທີ່ດີທີ່ສຸດຫຼືມີປະສິດທິພາບທີ່ສຸດທີ່ຈະໄປກ່ຽວກັບມັນ.
ເມື່ອນໍາໃຊ້ວິທີນີ້, ທຸກໆຄັ້ງທີ່ທ່ານຕ້ອງການແກ້ໄຂຕາຕະລາງທີ່ທ່ານຕ້ອງແກ້ໄຂທຸກໆແຖວໃນຕາຕະລາງເພື່ອໃຫ້ແນ່ໃຈວ່າແຕ່ລະແຖວແມ່ນສອດຄ່ອງກັບການປ່ຽນແປງ. ຕົວຢ່າງ: ຖ້າທ່ານໃສ່ແຖວໃຫມ່ໃນຕາຕະລາງຂອງທ່ານ, ທຸກໆແຖວລຸ່ມນີ້ມັນຕ້ອງມີການປ່ຽນແປງຫ້ອງຮຽນ.
CSS ເຮັດໃຫ້ງ່າຍຕໍ່ຕາຕະລາງທີ່ມີເສັ້ນດ່າງມ້າ. ທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມຄຸນລັກສະນະ HTML ພິເສດຫຼື CSS classes, ທ່ານພຽງແຕ່ໃຊ້: nth-of-type (n) CSS selector .
ຕົວເລືອກ: ຕົວເລືອກ nth-of-type (n) ແມ່ນແບບ pseudo-class ແບບໂຄງສ້າງໃນ CSS ເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດສະແດງອົງປະກອບແບບອີງຕາມຄວາມສໍາພັນຂອງເຂົາເຈົ້າກັບສ່ວນຂອງພໍ່ແມ່ແລະພີ່ນ້ອງ. ທ່ານສາມາດໃຊ້ມັນເພື່ອຄັດເລືອກເອົາຫນຶ່ງຫຼືຫຼາຍອົງປະກອບອີງຕາມຄໍາສັ່ງແຫຼ່ງຂອງເຂົາເຈົ້າ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ມັນສາມາດສົມທຽບກັບທຸກໆອົງປະກອບທີ່ເປັນລູກທີ່ມີປະເພດຂອງພໍ່ແມ່.
ຈົດຫມາຍ n ສາມາດເປັນຄໍາສໍາຄັນ (ເຊັ່ນວ່າຄີກຫຼືແມ້ແຕ່), ເລກ, ຫຼືສູດ.
ຕົວຢ່າງ: ເພື່ອໃຫ້ທຸກຖ້ອຍຄໍາທີ່ມີສີພື້ນຫລັງສີເຫລືອງ, ເອກະສານ CSS ຂອງທ່ານຈະປະກອບມີ:
p: nth-of-type (odd) {
ພື້ນຫລັງ: ສີເຫຼືອງ;
}
ເລີ່ມຕົ້ນດ້ວຍຕາ HTML ຂອງທ່ານ
ຫນ້າທໍາອິດ, ສ້າງຕາຕະລາງຂອງທ່ານຕາມປົກກະຕິທ່ານຈະຂຽນມັນໃນ HTML. ຢ່າເພີ່ມຊັ້ນພິເສດໃດໆໃຫ້ກັບແຖວຫລືແຖວ.
ໃນຄໍເຕົ້າໄຂ່ທີ່ຂອງທ່ານໃຫ້ຕື່ມ CSS ດັ່ງຕໍ່ໄປນີ້:
tr: nth-of-type (odd) {
ພື້ນຫລັງສີ: #ccc;
}
ນີ້ຈະສະຖິດທຸກໆແຖວທີ່ມີສີພື້ນຫລັງສີຂີ້ເຖົ່າເລີ່ມຕົ້ນດ້ວຍແຖວທໍາອິດ.
ຄໍເຕົ້າໄຂ່ທີ່ປ່ຽນແບບແບບດຽວກັນໃນແບບດຽວກັນ
ທ່ານສາມາດເຮັດແບບດຽວກັບຄໍລໍາໃນຕາຕະລາງຂອງທ່ານ. ເພື່ອເຮັດແນວນັ້ນ, ພຽງແຕ່ປ່ຽນ tr ໃນຊັ້ນ CSS ຂອງທ່ານໃຫ້ td. ຍົກຕົວຢ່າງ:
td: nth-of-type (odd) {
ພື້ນຫລັງສີ: #ccc;
}
ການນໍາໃຊ້ສູດໃນຕົວເລືອກ nth-of-type (n)
syntax ສໍາລັບສູດທີ່ນໍາໃຊ້ໃນຕົວເລືອກແມ່ນ + b.
ເປັນເລກທີ່ສະແດງຂະຫນາດຂອງວົງຈອນຫຼືດັດຊະນີ.
n ແມ່ນຕົວຈິງແລ້ວ, ຈົດຫມາຍ "n" ແລະເປັນຕົວແທນ, ເຊິ່ງຢູ່ໃນ 0.
+ ເປັນຜູ້ປະກອບການທີ່ອາດຈະເປັນ "-"
b ເປັນຈໍານວນເຕັມແລະສະແດງມູນຄ່າການຊົດເຊີຍ - ຕົວຢ່າງ, ຈໍານວນແຖວລົງລຸ່ມຄວນເລືອກຕົວເລືອກເລີ່ມຕົ້ນການນໍາໃຊ້ສີພື້ນຫລັງ. ນີ້ແມ່ນຕ້ອງການຖ້າຜູ້ປະກອບການຖືກລວມຢູ່ໃນສູດ.
ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການກໍານົດສີພື້ນຫລັງສໍາລັບທຸກແຖວທີ 3, ສູດຂອງທ່ານຈະເປັນ 3n + 0. CSS ຂອງທ່ານອາດຈະຄືກັບ:
tr: nth-of-type (3n + 0) {
ພື້ນຫລັງ: slategray;
}
ເຄື່ອງມືທີ່ເປັນປະໂຫຍດສໍາລັບການນໍາໃຊ້ຕົວເລືອກ nth-of-type
ຖ້າທ່ານມີຄວາມຮູ້ສຶກເລັກນ້ອຍກ່ຽວກັບເລື່ອງສູດຂອງການນໍາໃຊ້ຕົວເລືອກ nth-of-type pseudo-class, ລອງໃຊ້: nth Tester site ເປັນເຄື່ອງມືທີ່ເປັນປະໂຫຍດທີ່ສາມາດຊ່ວຍໃຫ້ທ່ານກໍານົດໄວຣັສເພື່ອໃຫ້ໄດ້ຜົນທີ່ທ່ານຕ້ອງການ. ໃຊ້ເມນູແບບເລື່ອນລົງເພື່ອເລືອກ nth-of-type (ທ່ານຍັງສາມາດທົດລອງກັບຫ້ອງຮຽນ pseudo ອື່ນໆທີ່ນີ້, ເຊັ່ນ: nth-child).