ບັນດາຄວາມ @scope CSS

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

CSS @scope ກົດລະບຽບອາດຫຼີກເລືອກຕົວເອງໃນ sub-tree DOM:

ຜ່ານກົດລະບຽບ @ 规ິດການ, ທ່ານສາມາດການບັນທຶກຕົວເອງຢ່າງຈິງຈັງ, ໂດຍບໍ່ຕ້ອງຂຽນກົດລະບຽບແບບຄຳເລືອກຫຼາຍ:

ກົດລະບຽບ @ 规ິດການລົງຄວາມກ່ຽວພັນລະຫວ່າງກົດລະບຽບແລະ DOM structure.

ພາບຄົນ

ກໍລະນີ 1

ຢູ່ທີ່ນີ້, ພວກເຮົາໃຊ້ສອງວົງມາອິດສະຫຼະຈຳນວນດຽວ: @scope ວົງມາຈັບ .ex1 ແລະ .ex2 ໃນ <a> element. :scope ໃຊ້ເພື່ອເລືອກ ແລະ ການກະຈາຍກຳນົດສະແນນແບບກາຍຂອງວົງມາກໍ່ໄດ້. ໃນກໍລະນີນີ້, ວົງມາກໍ່ໄດ້ຕິດຕັ້ງໃນ <div> ທີ່ມີການຕິດຕັ້ງປະເພດ:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

ທ້າທາຍດັງສັນ

ບັນທຶກ HTML ພາຍໃນ:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

ມີປະກອບ <div> ບັນຈຸການບັນຊີ, ຖ້າພວກເຮົາຕ້ອງຈັດວິຊາການໃຫ້ສິ່ງ <h2> ແລະ <img> ໃນສ່ວນ container/news, ຕ້ອງຂຽນດັ່ງຕໍ່ (ບໍ່ຕ້ອງນຳໃຊ້ @scope):

ຕົວຢ່າງ 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

ທ້າທາຍດັງສັນ

ນຳໃຊ້ @scope ບົດບັນຍັດ, ເຈົ້າສາມາດບົ່ງມືກັບສິ່ງທີ່ຢູ່ໃນລະຫວ່າງສິ່ງທີ່ຢູ່ລະຫວ່າງ, ໂດຍບໍ່ຕ້ອງຂຽນບົດບັນຍັດຄົນເລືອກທີ່ຂີ້ຮ້າຍ, ອີງຕາມນັ້ນ:

ຕົວຢ່າງ 3

ທີ່ນີ້, ພວກເຮົາພຽງແຕ່ກວດກາ .container ໃນສະມາຊິກ .container, ແລະເຕັມ .container ງ່າຍໃຫ້ເປັນຈຸດພື້ນຂອງບົດບັນຍັດ @scope:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

ທ້າທາຍດັງສັນ

@scope ບົດບັນຍັດບັນຈຸໜຶ່ງຫຼືຫຼາຍບົດບັນຍັດ, ທີ່ສາມາດນຳໃຊ້ໂດຍສອງວິທີ: @scope

• ໃນນາມບົດບັນຍັດອິດສະຫຼະ, ໃນກໍລະນີນີ້, ມັນບັນຈຸການຫວຽງຫຼັງກ່ອນ, ລວມມີຈຸດພື້ນຂອງຈຸດກວດກາ ແລະ ຄູ່ຄັດເລືອກຈຸດກວດກາຄວາມຈຳກັດທີ່ມິສິດ, ທີ່ອະທິບາຍຂ້າງສູງຂອງຈຸດກວດກາ.
• ໃນນາມ HTML <style> ເປັນລະບົບວິສະວະກອນຂອງຈຳນວນ, ໃນກໍລະນີນີ້, ບາງສ່ວນທຳອິດຖືກຫັກລົງ, ແລະບົດບັນຍັດທີ່ບັນຈຸໄດ້ຕິດຕາມຢູ່ໃນປະກອບພໍ່ຂອງ <style>.

ຕົວຢ່າງ 4

“ຈຸດກວດກາດວານຂັບ”ພຽງແຕ່ສິ່ງທີ່ຢູ່ລະຫວ່າງສອງປະກອບຢູ່ໃນຕົ້ນພັນລັດ. ນັ້ນແມ່ນຕົວຢ່າງ:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

ທ້າທາຍດັງສັນ

ສິ່ງສັບສຳນັກງານ CSS

@scope (ຈຸດພື້ນຂອງຈຸດກວດກາ) {
  ບົດບັນຍັດ
}

ຫຼື

/* ຈຸດກວດກາດວານຂັບ */
@scope (ຈຸດພື້ນຂອງຈຸດກວດກາ) to (ຈຸດກວດກາຄວາມຈຳກັດ) {
  ບົດບັນຍັດ
}

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

ຈຳນວນໃນຕາມກາງອອກສະແດງວ່າລະບົບທີ່ເປັນອັນດັບທຳອິດທີ່ເຫັນການສະໜັບສະໜູນ @ ບົດບັນຍັດ.