Te whakamahi i: nth-of-type (n) Ki nga Ripanga
Hei ngawari ake te korero i nga papa, he mea tino pai ki nga rarangi tahua me nga tae papamuri. Ko tetahi o nga huarahi tino nui ki nga tepu kāhua ko te whakatakoto i te tae o muri o nga rarangi katoa. He maha tonu nga korero mo tenei "nga whiu o te zebra."
Ka taea e koe te whakatutuki i tenei ko te tautuhi i nga rarangi katoa me te akomanga CSS, me te tautuhi i te momo mo taua akomanga. Kaore tenei i te mahi, engari ko te huarahi tino pai, ko te pai rawa atu ki te haere.
A, no te whakamahi i tenei tikanga, i nga wa katoa ka hiahia koe ki te whakatika i taua ripanga ka taea e koe te whakatika i nga rarangi kotahi i te tepu hei whakarite i te raupapa o ia rarangi ki nga huringa. Hei tauira, ki te whakauru koe i tetahi rarangi hou ki taau tepu, ko nga rarangi atu i raro nei me tahuri te akomanga.
Ka taea e CSS te ngawari ki te taapau i nga tepu me nga whiu taiao. Kaore e hiahia ana koe ki te tapiri i etahi atu huanga HTML me nga karaehe CSS, ka whakamahi koe i te: select-of-type (n) selector CSS .
Ko te: nth-of-type (n) he kaitono he hanganga hangarau i CSS e taea ai e koe nga huinga huinga e hāngai ana ki o raatau hononga ki nga matua me nga taiao tuakana. Ka taea e koe te whakamahi hei whiriwhiri i tetahi neke atu ranei o nga huinga i runga i ta raatau puna. I etahi atu kupu, ka taea e ia te hono atu ki nga mea katoa ko te tamaiti nth o tetahi ahua o ona matua.
Ko te reta n ka taea te kupu matua (pera me te kino, me te), he tau, he raupapa ranei.
Hei tauira, ki te tahua i tetahi atu tūtohu paraka ki te tae kowhai kowhai, ka whakauruhia e to tuhinga CSS:
p: nth-of-type (ine) {
whakamārama: kōwhai;
}
Tīmata ki te Ripanga HTML
Tuatahi, hangahia to papa kia rite ki to tuhi tuhi i te HTML. Kaua e tapiritia etahi karaehe motuhake ki nga rarangi, ki nga pou ranei.
I roto i to tahua, whakaurua te CSS e whai ake nei:
tr: nth-of-type (odd) {
tae-tae: #ccc;
}
Ka taatai tenei i tetahi atu rarangi me te karaehe whero e timata ana me te rarangi tuatahi.
Ko nga Tīwae Whakawhiti Kāhua i te Ara Kotahi
Ka taea e koe te mahi i te ahua o te tahua ki nga pou i roto i au ripanga. Ki te pera, whakarereke noa i te waahanga o to raatau CSS ki td. Hei tauira:
td: nth-of-type (odd) {
tae-tae: #ccc;
}
Te whakamahi i nga Puka i roto i te nth-of-type (n) Kaitono
Ko te whakahuahua mo te tauira i whakamahia i roto i te kaiwhiwhi ko te + b.
a he tau e tohu ana i te huringa me te rahi o te taurangi.
n ko te reta "n" me te tohu i te kaute, ko nga whetu kei te 0.
+ he kaiwhakahaere, he mea hoki hei "-"
b he tauwhāiti me te tohu i te uara whakaheke-hei tauira, he maha nga rarangi o te waahanga ka timata te kaitono ki te whakamahi i te tae papamuri. E hiahiatia ana tenei mehemea kei te whakauru tetahi kaiwhakamahi ki roto i te ture.
Hei tauira, ki te hiahia koe ki te tautuhi i te tae papamuri mo nga rarangi 3, ka tohua tau ture 3n + 0. Kia penei pea to CSS:
tr: nth-of-type (3n + 0) {
whakamārama: slategray;
}
Ngā Utauta Āwhina hei Whakamahia te Kaitautoko Nth-of-type
Mena kei te whakaaro koe he iti noa te ahua o te whakamahinga o te whakamahi i te kaitono o te pseudo-class-type-type-te-momo, whakamātauhia te: Nth Tester site hei taputapu whai hua hei āwhina ia koe ki te tautuhi i te raupapa hei whakatutuki i te titiro e hiahia ana koe. Whakamahia te tahua takahuri ki te whiriwhiri i te nth-of-type (ka taea hoki e koe te whakamatautau ki etahi atu pseudo-karaehe i konei, ano hoki, pēnei i te nth-child).