ການກໍ່ສ້າງຄູ່ມືການຄົ້ນຄວ້າຜູ້ຫຼິ້ນ

ຄູ່ແຍງຫຼັງຜູ້ຫຼິ້ນ (descendant selector) ກໍ່ເອີ້ນວ່າ ຄູ່ແຍງລວມ.

后代选择器可以选择作为某元素后代的元素。

ການເລືອກຫົວໜ້າຕາມເຫດການ

ພວກເຮົາສາມາດກໍ່ຕັ້ງຄູ່ເລືອກລູກຊົນເພື່ອສ້າງກົດລະບຽບ, ທີ່ຈະດຳເນີນງານໃນແບບສະຖານະຂອງເອກະສານທີ່ຕ້ອງການ, ແຕ່ບໍ່ດຳເນີນງານໃນແບບສະຖານະອື່ນ.

ຕົວຢ່າງ, ຖ້າທ່ານຕ້ອງຈະນຳໃຊ້ຮູບແບບນີ້ໃຫ້ em ໃນ h1, ທ່ານສາມາດຂຽນນີ້:

h1 em {color:red;}

ກົດລະບຽບນີ້ຈະປ່ຽນສີຫຼັງຂອງ em ທີ່ເປັນລູກຊົນຂອງ h1 ເປັນສີສີແດງ. em ຕ່າງໆ (ເຊິ່ງແມ່ນສະຫຼັດການຫຼັກຂອງວັດສະດຸ) ຈະບໍ່ຖືກກວດກາໂດຍກົດລະບຽບນີ້:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

亲自试一试

ຕື່ມຕື່ມ, ທ່ານສາມາດຈຳນວນ class ຊື່ em ໃຫ້ໃນ h1, ແຕ່ວ່າຄູ່ເລືອກລູກຊົນຈະມີຄວາມສຳຄັບຫຼາຍຫຼາຍ.

ການອະທິບາຍຄູສາຍ

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

ຄູ່ເລືອກ h1 em ສາມາດຈະອະທິບາຍວ່າ 'ທຸກ em ທີ່ເປັນລູກຊົນຂອງ h1'. ຖ້າທ່ານພຽງແຕ່ອ່ານຄູ່ເລືອກຈາກຊ້າຍໄປຊາຍແລ້ວ, ທ່ານສາມາດປ່ຽນວ່າ 'ທຸກ h1 ທີ່ມີ em ຈະນຳໃຊ້ຮູບແບບນີ້ໃຫ້ em'.

ການນຳໃຊ້ຢ່າງສະເພາະ

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

ກໍຕັ້ງວ່າມີໜັງສືພາບທີ່ມີ sidebar ແລະເຂດຫຼັກ. ພາບຫຼັງແມ່ນສີຟ້າ, ເຂດຫຼັກແມ່ນສີຂາວ, ທັງສອງເຂດມີລາຍການຫົວໜ້າ. ບໍ່ສາມາດຈະຈຳນວນຫົວໜ້າທັງໝົດເປັນສີຟ້າໄດ້, ຍ້ອນວ່າຫົວໜ້າສີຟ້າໃນ sidebar ຈະບໍ່ເຫັນ.

ການແກ້ໄຂແມ່ນນຳໃຊ້ຄູ່ເລືອກລູກຊົນ. ໃນການນີ້, ທ່ານສາມາດຈະຈຳນວນປະເພດ class ຊື່ sidebar ໃຫ້ div ທີ່ກວມເອົາ sidebar, ແລະຈຳນວນ class ຊື່ maincontent ໃຫ້ເອົາໃນເຂດຫຼັກ. ຫຼັງຈາກນັ້ນ, ທ່ານສາມາດຂຽນຮູບແບບນີ້:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

    
  
  • List item 1
    
      
      
    1. List item 1-1
      2. 
      
    2. List item 1-2
      3. 
      
    3. List item 1-3
        
        
          
      1. List item 1-3-1
        2. 
          
      2. List item 1-3-2
        3. 
          
      3. List item 1-3-3
        4. 
        
      
      
      4. 
      
    4. List item 1-4
      5. 
    
    
  
    • 
  
  • List item 2
    • 
  
  • List item 3
    •

亲自试一试