ຕົວເລືອກ Descendant Selector ແມ່ນຫຍັງ?

ໂຄງສ້າງຂອງເອກະສານ HTML ແມ່ນຄ້າຍຄືກັນກັບຕົ້ນໄມ້ຄອບຄົວ. ໃນຄອບຄົວຂອງທ່ານ, ທ່ານມີພໍ່ແມ່ແລະຄົນອື່ນທີ່ມາຢູ່ນໍາທ່ານ. ເຫຼົ່ານີ້ແມ່ນບັນພະບຸລຸດຂອງພວກເຈົ້າ. ເດັກນ້ອຍແລະຜູ້ທີ່ມາຫຼັງຈາກທ່ານຢູ່ຕົ້ນໄມ້ນັ້ນແມ່ນລູກຫລານຂອງທ່ານ. HTML ເຮັດວຽກຢູ່ໃນຮູບແບບທີ່ຄ້າຍຄືກັນ. ອົງປະກອບທີ່ຢູ່ພາຍໃນອົງປະກອບອື່ນໆແມ່ນລູກຫລານຂອງພວກເຂົາ. ຕົວຢ່າງເຊັ່ນເກືອບທຸກອົງປະກອບ HTML ຢູ່ພາຍໃນຂອງ tags, ພວກເຂົາຈະເປັນລູກຫລານຂອງອົງປະກອບ <ຮ່າງກາຍ 'ນັ້ນ. ສາຍພົວພັນນີ້ແມ່ນສໍາຄັນທີ່ຈະເຂົ້າໃຈເມື່ອທ່ານເລີ່ມຕົ້ນເຮັດວຽກຮ່ວມກັບ CSS ແລະຈໍາເປັນຕ້ອງໄດ້ກໍານົດເປົ້າຫມາຍສະເພາະໃດຫນຶ່ງເພື່ອນໍາໃຊ້ຮູບແບບທີ່ມີສາຍຕາ.

CSS Descendant Selectors

ຕົວເລືອກ descendant CSS ໃຊ້ກັບອົງປະກອບທີ່ຢູ່ພາຍໃນອົງປະກອບອື່ນ (ຫຼືຖືກລະບຸຢ່າງຖືກຕ້ອງ, ອົງປະກອບທີ່ເປັນລູກຫລານຂອງອົງປະກອບອື່ນ). ຕົວຢ່າງ, ບັນຊີລາຍຊື່ທີ່ບໍ່ມີອັນດັບຫນຶ່ງມີແທັບທີ່ມີແທັບເປັນລູກຫລານ. ໃຫ້ໃຊ້ HTML ດັ່ງຕໍ່ໄປນີ້ເປັນຕົວຢ່າງ:

• ນີ້ແມ່ນການເຊື່ອມໂຍງ

  ປ້າຍ LI ແມ່ນລູກຫລານຂອງແທດ UL. ປ້າຍ A ແມ່ນລູກຫລານຂອງລູກຫລານຂອງລູກ (ລູກຫລານ) ແລະລູກຫຼານ UL (ລູກຫລານ). ຖ້າທ່ານຄິດກ່ຽວກັບເລື່ອງນີ້ໂດຍໃຊ້ຕົວຢ່າງຕົ້ນໄມ້ຄອບຄົວ,

  ຈະເປັນພໍ່ແມ່,
  • ຈະເປັນລູກຂອງອົງປະກອບນັ້ນແລະ ຈະເປັນລູກຂອງ
  • ແລະລູກຫລານຂອງ the

    ດັ່ງນັ້ນວິທີທີ່ທ່ານກໍາລັງເປົ້າຫມາຍອົງປະກອບສະເພາະໃນຫນ້າເວັບໂດຍນໍາໃຊ້ຕົວເລືອກລຸ້ນເຫຼົ່ານີ້? ຫນ້າທໍາອິດ, ທ່ານຕ້ອງກໍານົດຕົວເລືອກທີ່ສືບເຊື້ອສາຍໂດຍໃຊ້ຕົວເລືອກປະເພດສອງ (ຫຼືຫຼາຍກວ່າ) ທີ່ແຍກອອກຈາກສະຖານທີ່.

    li a {text-decoration: none }

    ໃນຕົວຢ່າງທີ່ວ່າ, ຄໍເຕົ້າໄຂ່ທີ່ຈະນໍາໃຊ້ກັບອົງປະກອບເຊື່ອມໂຍງ () ທີ່ເປັນລູກຫລານຂອງລາຍການລາຍການລາຍການ (

    • ). ທຸກເຊື່ອມຕໍ່ອື່ນໆໃນຫນ້າທີ່ບໍ່ແມ່ນລູກຫລານຂອງລາຍການລາຍການຈະບໍ່ໄດ້ຮັບແບບນີ້.

      ສິ່ງຫນຶ່ງທີ່ສໍາຄັນທີ່ຕ້ອງຈື່ແມ່ນວ່າມັນບໍ່ສໍາຄັນວ່າພວກເຂົາຢູ່ໃນລະຫວ່າງແທັບໃດໆທີ່ທ່ານອາດຈະໃຊ້ໃນຕົວເລືອກລູກຫລານຂອງທ່ານ. ຖ້າອົງປະກອບທີສອງຖືກປິດຢູ່ທຸກບ່ອນພາຍໃນອົງປະກອບທໍາອິດມັນຈະຖືກເລືອກເປັນລູກຫລານ.

      ຖ້າທ່ານຕ້ອງການເລືອກຫົວຂໍ້ທັງຫມົດທີ່ລົງມາຈາກອົງປະກອບ ul, ທ່ານຈະຂຽນວ່າ:

      ul a {text-decoration: none }

      ໃນປັດຈຸບັນ, ຄໍເຕົ້າໄຂ່ທີ່ເຫຼົ່ານີ້ຈະນໍາໃຊ້ກັບການເຊື່ອມຕໍ່ທີ່ເປັນລູກຫລານຂອງລາຍການລາຍການ. ທ່ານຍັງສາມາດຂຽນຕົວເລືອກນີ້ໄດ້

      ul li a {text-decoration: none }

      ນີ້ແມ່ນຕົວເລືອກລູກສອນທີ່ໃຊ້ຕົວເລືອກຫຼາຍກວ່າສອງຊະນິດ. ໃນກໍລະນີນີ້, ນີ້ຈະນໍາໃຊ້ກັບການເຊື່ອມຕໍ່ພາຍໃນຂອງລາຍການລາຍການແລະຍັງຢູ່ໃນບັນຊີລາຍຊື່ທີ່ບໍ່ໄດ້ກໍານົດໄວ້.

      ການນໍາໃຊ້ຕົວເລືອກຄັດເລືອກແລະຕົວເລືອກ ID

      ຕົວເລືອກທີ່ທ່ານກໍາລັງ descending ຈາກບໍ່ຈໍາເປັນຕ້ອງເປັນລູກຫລານຊະນິດ. ຕົວຢ່າງ, ຈິນຕະນາການວ່າທ່ານມີພື້ນທີ່ຂອງເວັບໄຊທ໌ (ຄືການແບ່ງ) ທີ່ມີຄຸນລັກສະນະ ID ຂອງ "ປ້າຍໂຄສະນາ". ທ່ານສາມາດຕັ້ງຄ່າຕົວເລືອກລູກສອນອອກຈາກ ID ທີ່:

      #billboard ul {background-color: #ccc; }

      ນີ້ຈະສະໄຕລາຍຊື່ທີ່ບໍ່ມີອັນດັບທີ່ເປັນລູກຫລານຂອງອົງປະກອບທີ່ມີ ID ຂອງ "ປ້າຍໂຄສະນາ". ທ່ານສາມາດເຮັດເຊັ່ນດຽວກັບຄ່າຫ້ອງຮຽນ.

      divbillboard ul {background-color: #ccc }

      ນີ້ຄາດວ່າພະແນກມີມູນຄ່າຫ້ອງຮຽນຂອງ "ປ້າຍໂຄສະນາ". CSS ຂ້າງເທິງນີ້ຈະເປັນອົງປະກອບ

      ພາຍໃນພະແນກທີ່ມີມູນຄ່ານີ້.

      ທ່ານສາມາດໄດ້ຮັບການກໍ່ສ້າງຢ່າງຫນັກແລະກະຕຸ້ນດ້ວຍຕົວເລືອກທີ່ສືບເຊື້ອສາຍ. ຕົວຢ່າງ: ຖ້າທ່ານໃຊ້ Dreamweaver ເພື່ອຂຽນ ໂຄ້ດ HTML ຂອງທ່ານ, ມີການຕັ້ງຄ່າເມື່ອທ່ານເພີ່ມກົດ CSS ໃຫມ່ທີ່ຈະສ້າງຕົວເລືອກໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ການຕັ້ງຕົວເຄີເຊີຂອງທ່ານໃນຫນ້ານັ້ນ. ສິ່ງທີ່ Dreamweaver ເຮັດໃນກໍລະນີນີ້ແມ່ນການສ້າງຕົວເລືອກທີ່ສືບທອດອອກມາຢ່າງຍາວນານແລະຍາວນານ. ວ່າຄວາມຈໍາເປັນຫຼາຍບໍ່ຈໍາເປັນສໍາລັບ CSS ຂອງທ່ານເຮັດວຽກ. ສິ່ງທີ່ທ່ານຕ້ອງການເຮັດຄືການຊອກຫາຄວາມສົມດູນລະຫວ່າງຕົວເລືອກທີ່ສືບທອດກັນທີ່ພຽງພໍເພາະສະນັ້ນທ່ານສາມາດເຈາະລົງກັບອົງປະກອບທີ່ແນ່ນອນທີ່ທ່ານຕ້ອງການ (ໂດຍບໍ່ມີຮູບແບບທີ່ທ່ານບໍ່ຕ້ອງການຜົນກະທົບ) ໂດຍບໍ່ມີກົດ CSS ທີ່ມີຕົວເລືອກທີ່ເກີນໄປ ຂະຫນາດໃຫຍ່.