CSS :nth-last-of-type() 伪类

定义和用法

CSS :nth-last-of-type(n) 伪类用于匹配作为其父元素中特定类型的倒数第 n 个子元素的每个元素。

n 可以是一个数字/索引、一个关键字（odd 或 even）或一个公式（如 an + b）。

提示：查看 :nth-last-child() 伪类以选择作为其父元素中倒数第 n 个子元素的元素，无论其类型如何。

ຕົວຢ່າງ

ກໍານົດ 1

ກໍານົດສີຫຼັງສີແບບສີສີນິວາຍສຳລັບ <p> ທີ່ມີດຳລົງບັນທຶກຫຼັງຄັ້ງທີ່ສອງຂອງບັນຊີລູກໃຫຍ່ຂອງບັນຊີລູກຄັນນີ້

ນອກຈາກນັ້ນພວກເຮົາກໍານົດສີຫຼັງສີແບບສີສີນິວາຍສຳລັບ <li> ທີ່ມີດຳລົງບັນທຶກຫຼັງຄັ້ງທີ່ສາມຂອງບັນຊີລູກໃຫຍ່ຂອງບັນຊີລູກຄັນນີ້

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

ການທົດລອງດຽວກັນ

ກໍານົດ 2

odd ແລະ even ເປັນຄຳສັບສັນທີ່ສາມາດນຳໃຊ້ເພື່ອການຈັດການບັນຊີລູກຄັນນີ້ໃນຕອນຫຼັງຂອງບັນຊີລູກໃຫຍ່ຂອງບັນຊີລູກຄັນນີ້ທີ່ມີດຳລົງບັນທຶກຫຼັງຄັ້ງທີ່ແຕກຕໍ່ກັນຫຼາຍຫຼາຍ

ໃນນັ້ນພວກເຮົາກໍານົດສີຫຼັງສີແບບສີສີນິວາຍສຳລັບ <p> ທີ່ມີດຳລົງບັນທຶກຫຼັງຄັ້ງທີ່ແຕກຕໍ່ກັນຫຼາຍຫຼາຍ

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

ການທົດລອງດຽວກັນ

ກໍານົດ 3

ການນຳໃຊ້ຕາມການກົດລະບຽບ (an + b) . ຄວາມຄິດ: a ແມ່ນຄວາມກັນທີ່ຄົງຄວາມຄຸນ, n ແມ່ນຈຳນວນທັງໝົດທີ່ບໍ່ຫຼຸດລົງຈາກ 0, b ແມ່ນຄວາມກັນທີ່ຄົງຄວາມຄຸນ

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

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

ການທົດລອງດຽວກັນ

ວິນຍານ CSS

:nth-last-of-type(index | ການຫຼົງ | ການສອງ an+b) {
  ການສະແດງ css;
}

ລະບົບຂັ້ນຕົ້ນ

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

ເລກທີ່ໃນຕາມການຕັ້ງຕັດຢູ່ໃນຕາມການບໍ່ຄຸມຄວາມກັນທີ່ສຸດຂອງບັນຊີລູກໃຫຍ່ຂອງບັນຊີລູກຄັນນີ້