CSS :nth-of-type() hali ya mbinu

ufafanikiano na kuitiko

CSS :nth-of-type(n) Tabia ya kusoma inaingia kwa kufikiria kiumbe wa msingi wa kina wa aina moja (jina la kina) cha kipimo cha n n Kwa kila elementi ya kiumbe wa msingi wa n

n inaweza kuwa namba/kipimo cha kwanza, kifaa cha kusoma (kipimo chake na kipimo kikubwa) au formula (kama an + b)

Tahara:Angalia :nth-child() Tabia ya kusoma kwa kufikiria kiumbe wa msingi wa kina wa kipimo cha n n Kwa kila elementi ya kiumbe wa msingi cha kina, bila kufikiria aina yake.

Mfano

Mfano 1

Jinsi ya kutumia :nth-of-type() Muundo wa chaguo:

/* Chaguo yote ya div wa pili kwenye wanaoonekana wa wengine */
div:nth-of-type(2) {
  background: red;
}
/* Chaguo yote ya li ya pili kwenye orodha */
li:nth-of-type(2) {
  background: lightgreen;
}
/* Chaguo yote ya kiumbe wa kwanza wa kundi cha wanaoonekana kwa kila tatu */
:nth-of-type(3) {
  background: yellow;
}

Jifunze kwa uwanja mpya

Mfano 2

kipimo chake na kipimo kikubwa Ni kifaa cha kusoma kwa kufikiria kipimo cha kubwa na kipimo chake cha kiumbe wa msingi (kiumbe wa kwanza wa msingi kina kipimo cha 1).

Hapa, tumewa kufikiria rangi ya msingi ya kila elementi ya <p> ambaye ni kipimo kikubwa na kipimo chake:

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

Jifunze kwa uwanja mpya

Mfano 3

kwa muhimu wa (an + b)a Ni kifaa cha kidhamiaji kubwa cha msingi, n ni kila maneno ya kidhamiaji kubwa ya kidhamiaji kwenye namba ya 0 kuzingatia.b Ni kifaa cha kidhamiaji kubwa.

Hapa, tumewa kufikiria rangi ya msingi ya kila elementi ya <p> ambayo ni kipimo cha 3 (hivyo tutachagua kiume wa tatu, kiume wa nne, kiume wa tano, na hivyo):

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

Jifunze kwa uwanja mpya

Mfano 4

Hapa, tumewa kufikiria rangi ya msingi ya kila elementi ya <p> ambayo ni kipimo cha 3. Kisha tumewasubiri 1 (hivyo tutachagua kiume wa pili, kiume wa tano, kiume wa tano, na hivyo):

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

Jifunze kwa uwanja mpya

Mafunzo ya CSS

:nth-of-type(index | kipimo kikubwa | kipimo chake | an+b) {
  kifaa cha css;
}

Vifaa ya kidhamiaji

Tukio wa browser

Maneno ya kifaa cha tabia cha kawaida ya kusoma wa kufungua kina msingi kwenye browser ya kwanza ya kuchukua tabia hii.