Sèvi ak: nth-of-type (n) ak Tablo
Pou fè tab pi fasil li, li se souvan itil nan ranje style ak altène koulè background. Youn nan fason ki pi komen nan tab style se yo mete koulè a background nan chak ranje lòt. Sa a se souvan refere yo kòm "bann zèb."
Ou ka akonpli sa a se pa mete tout lòt ranje ak yon klas CSS ak Lè sa a, defini style la pou klas sa a. Travay sa a men se pa pi bon oswa pi efikas fason yo ale sou li.
Lè w ap itilize metòd sa a, chak fwa ou bezwen modifye tab sa a ou ka bezwen edite chak ranje sèl nan tablo a pou asire chak ranje ki konsistan avèk chanjman sa yo. Pa egzanp, si w mete yon ranje nouvo sou tab ou, chak lòt ranje ki anba a bezwen klas la chanje.
CSS fè li fasil pou tab style ak bann zèb. Ou pa bezwen ajoute nenpòt atribi HTML siplemantè oswa klas CSS, ou jis itilize a: nth-of-type (n) CSS selektè .
Nòt: nt-of-type (n) selektè se yon pseudo-klas estriktirèl nan CSS ki pèmèt ou eleman style ki baze sou relasyon yo nan paran ak eleman sibling. Ou ka itilize li pou chwazi youn oubyen plis eleman ki baze sou lòd sous yo. Nan lòt mo, li ka matche ak chak eleman ki se timoun nan nt nan yon kalite patikilye nan paran li yo.
Nèt lèt la ka yon mo kle (tankou enpè oswa menm), yon nimewo, oswa yon fòmil.
Pou egzanp, nan style chak lòt paragraf tag ak yon koulè background jòn, dokiman CSS ou ta gen ladan:
p: nth-of-type (enpè) {
background: jòn;
}}
Kòmanse avèk tablo HTML ou
Premyèman, kreye tab ou jan ou ta nòmalman ekri li nan HTML. Pa ajoute okenn kou espesyal nan ranje yo oswa kolòn yo.
Nan style ou a, ajoute CSS sa yo:
tr: nth-of-type (enpè) {
background-koulè: # cc;
}}
Sa a pral style tout lòt ranje ak yon koulè background gri kòmanse ak premye ranje a.
Style Kolòn Altène nan menm wout la
Ou ka fè menm kalite manier nan kolòn nan tab ou yo. Pou fè sa, tou senpleman chanje tr la nan klas CSS ou a td. Pa egzanp:
td: nth-of-type (enpè) {
background-koulè: # cc;
}}
Sèvi ak Fòmil yo nan yon seleksyon nt-of-tip (n)
Sentaks la pou yon fòmil ki itilize nan seleksyon an se yon + b.
yon se yon nimewo ki reprezante sik la oswa gwosè endèks.
n se aktyèlman lèt la "n" ak reprezante yon kontwa, ki zetwal nan 0.
+ se yon operatè, ki ka tou "-"
b se yon nonb antye relatif ak reprezante valè a konpanse - pou egzanp, konbyen ranje desann yo ta dwe selektè a kòmanse aplike koulè a background. Sa obligatwa si yon operatè enkli nan fòmil la.
Pou egzanp, si ou vle mete yon koulè background pou chak ranje 3yèm, fòmil ou ta dwe 3n + 0. CSS ou ta ka sanble tankou sa a:
tr: nth-of-type (3n + 0) {
background: slategray;
}}
Zouti itil pou Itilize nt-of-type selector
Si w santi w yon ti kras redone pa aspè fòmil pou itilize pseudo-klas seleksyon nt-of-type a, eseye: sit la nan tèsteur nyèm kòm yon zouti itil ki ka ede w defini sentaks la reyalize gade nan ou vle. Sèvi ak meni an demaraj yo chwazi nth-of-type (ou ka tou eksperyans ak lòt pseudo-klas isit la, tou, tankou nth-pitit).