CSS :nth-child() ເປັນລັກສະນະ

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

CSS :nth-child(n) 伪类用于匹配作为其父元素第 n 个子元素的任何元素。

此伪类根据元素在其父元素的子列表中的索引来匹配元素。

n 可以是一个数字/索引、一个关键字（ອອກ 或 ບໍ່ອອກ）或一个公式（如 an + b）。

提示：查看 :nth-of-type() 伪类以选择作为其父元素中同类型（标签名）的第 n 个子元素的元素。

实例

例子 1

如何使用 :nth-child() 伪类：

/* 选择任何兄弟元素组中的每第四个元素 */
:nth-child(4) {
  background-color: yellow;
}
/* 选择 div 兄弟元素中的第二个元素 */
div:nth-child(2) {
  background-color: red;
}
/* 选择列表中的第二个 li 元素 */
li:nth-child(2) {
  background-color: lightgreen;
}

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 2

ອອກ ແລະ ບໍ່ອອກ ເປັນຄຳປະກອບສຳນວນທີ່ສາມາດນຳໃຊ້ເພື່ອການຈັດການສິດລະປະກອບທີ່ເປັນຈຳນວນບໍ່ອອກ ຫຼື ບໍ່ອອກ (ທີ່ເປັນຄົນທີໜຶ່ງຄົນທີເຈັດແລະອີກ)

ບ່ອນນີ້ພວກເຮົາຈະຈຳນວນສີພາບຫຼັງສີແດງໃຫ້ປະກອບ <p> ທີ່ເປັນຈຳນວນບໍ່ອອກ ແລະ ບໍ່ອອກ (ທີ່ເປັນຄົນທີໜຶ່ງຄົນທີເຈັດແລະອີກ)

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 3

ນຳໃຊ້ຮູບແບບ (an + b) ອະທິບາຍ:a ສະຖານະທີ່ຈຳນວນອັນຕະລາງທີ່ຈະຕັ້ງຢູ່ຈາກ 0 ທີ່ເປັນຈຳນວນອັນຕະລາງທີ່ບໍ່ມີຈຳນວນບໍ່ສາມາດເປັນອັນຕະລາງb ເປັນຈຳນວນອັນຕະລາງ

ບ່ອນນີ້ພວກເຮົາຈະຈຳນວນສີພາບຫຼັງສີແດງໃຫ້ປະກອບ <p> ທີ່ດຳເນີນໄປພາຍໃນຈຳນວນທີ່ເປັນສາມທີ່ (ທີ່ເປັນຄົນທີສາມຄົນທີຫົກຄົນທີເຈັດແລະອີກ)

p:nth-child(3n+1) {
  background-color: red;
}

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 4

ບ່ອນນີ້ພວກເຮົາຈະຈຳນວນສີພາບຫຼັງສີແດງໃຫ້ປະກອບ <p> ທີ່ດຳເນີນໄປພາຍໃນຈຳນວນທີ່ເປັນສາມທີ່ (ທີ່ເປັນຄົນທີໜຶ່ງຄົນທີ່ສີ່ຄົນທີເຈັດແລະອີກ)

p:nth-child(3n-1) {
  background-color: red;
}

ທົດລອງດັ່ງກ່າວ

ວິນຍານ CSS

:nth-child(index | ອອກ | ບໍ່ອອກ | an+b) {
  ການອະທິບາຍ css;
}

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

ການສະຫຼັດພິການບັນຊີບັນນາທິການ

ຈຳນວນໃນຕາຕະລາງອອກສະແດງການສະຫຼັດພິການທີ່ອາດສະຫຼັດການສະຫຼັດການສະຫຼັດສະແດງວຽກງານບາດດັງທີ່ສະໜອງຄວາມສະຫຼັດການສະຫຼັດສະແດງວຽກງານບາດດັງ