CSS ʻNestedʼ ʻSelectorʼ (&)

ການກໍານົດແລະການນໍາໃຊ້

CSS ʻNestedʼ (&) ʻSelectorʼ ຖືກນຳໃຊ້ເພື່ອນຳໃຊ້ກົດລະບຽບຕໍ່ບັນດາປະກອບອາກາດໃນສະຖານະການຂອງບັນດາປະກອບອາກາດອື່ນ.

ວົງວາງຫຼຸດລົງຄວາມຕ້ອງການຂອງຄູ່ຄັດຫນັງຫນື່ງສຳລັບບັນດາປະກອບອາກາດທີ່ກ່ຽວຂ້ອງ.

ຄວາມຈຳນວນ

ຕົວຢ່າງ 1

ກ່ອນຈາກວົງວາງຢູ່ບ່ອນນັ້ນ，ທ່ານຕ້ອງອອກການກ່າວຫາແບບຫນັງຫນື່ງຄຳຄັດຄັດທັງໝົດອອກແບບດຽວກັນອີກຄັ້ງພາຍໃນບົດສະຫຼຸບດັ່ງກ່າວ:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

ສອບສວນຕົວເອງ

ຕົວຢ່າງ 2

ຫຼັງຈາກການວົງວາງຢູ່ບ່ອນນັ້ນ，ຄູ່ຄັດຈະຖືກຕໍ່ເນື່ອງມາແລະກົດລະບຽບກົດລະບຽບທີ່ກ່ຽວຂ້ອງຈະຖືກຈອງໃນກຸ່ມກົດລະບຽບພໍ່.

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

ສອບສວນຕົວເອງ

ຄຳແນະນຳ:ຖ້າການວັດຖຸ .box ຂອງທີ່ຂ້ອຍຕ້ອງລຶບອອກຈາກໂຄງການຂອງທ່ານແລ້ວ，ທ່ານສາມາດລຶບອອກທຸກກຸ່ມທັງໝົດໂດຍບໍ່ຕ້ອງຄົ້ນຫາຄູ່ຄັດດ້ານຄຳຄັດຄັນຫນັງ.

ການອ່ານ CSS

parentrule {
  ກົດລະບຽບ css;
  & childrule {
    ກົດລະບຽບ css;  } 
}

ລະອຽດດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັນຊີວັດ