CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) ang pangalan ng pseudo-class na maaring gamitin upang ma-select ang anak na elemento na pangalawa sa kanyang parent element na may parehong uri ng tag (name). n ang bawat elemento ng mga anak na elemento.

n maaaring maging isang numero/index, isang keyword (kahit anong o ganap) o isang formula (tulad ng an + b)

Mga payo:Tingnan :nth-child() ang pangalan ng pseudo-class na maaring gamitin upang ma-select ang anak na elemento na pangalawa sa kanyang parent element. n ang elemento na may anumang uri ng anak na elemento.

Mga halimbawa

Halimbawa 1

Kung paano gamitin :nth-of-type() Selector:

/* Pumili ng ikalawang elemento sa magkakapatid na div */
div:nth-of-type(2) {
  background: red;
}
/* Pumili ng ikalawang li sa listahan */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Pumili ng bawat ikatlong elemento ng anumang grupo ng magkakapatid */
:nth-of-type(3) {
  background: yellow;
}

亲自试一试

Halimbawa 2

kahit anong at ganap ay keyword, maaring gamitin upang ma-match ang index na ganap o kahit anong index (unang anak na may index ay 1).

Dito, pinaghahandaan namin ang magkakaibang kulay ng background para sa lahat ng <p> na may ganap na index at kahit anong index:

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

亲自试一试

Halimbawa 3

gamit ang formula (an + b) na naglalarawan:a naglalaman ng integer na hakbang, n ay lahat ng non-negative integer na mula sa 0,b ay integer na offset.

Dito, pinaghahandaan namin ang kulay ng background para sa lahat ng <p> na may index na tatlong multiplo (pupupunta sa ikatlong, ikaanim, ikasiyam atbp):

p:nth-of-type(3n+0) {
  background: red;
}

亲自试一试

Halimbawa 4

Dito, pinaghahandaan namin ang kulay ng background para sa lahat ng <p> na may index na tatlong multiplo. Pagkatapos, inaalis namin ang 1 (pupupunta sa ikalawa, iklima, ikwara atbp):

p:nth-of-type(3n-1) {
  background: red;
}

亲自试一试

CSS 语法

:nth-of-type(index | ganap | kahit anong | an+b) {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪类的首个浏览器版本。