Օգտագործելով `nth-of-type (n) աղյուսակներով
Սեղանները հեշտությամբ կարդալու համար, հաճախ օգտակար է ոճը փոխարինող գույներով: Սեղանի սեղանների ամենատարածված ձեւերից մեկը յուրաքանչյուր հերթի ֆոնի գույնն է: Սա հաճախ կոչվում է «զեբրա շերտեր»:
Դուք կարող եք իրականացնել դա `կարգավորելով յուրաքանչյուր դասի CSS դասի հետ եւ այնուհետեւ սահմանելով այդ դասի ոճը: Սա աշխատում է, բայց դա ամենալավ կամ ամենաարդյունավետ միջոցն է, դրա մասին գնալը:
Այս մեթոդը կիրառելիս ամեն անգամ, երբ անհրաժեշտ է խմբագրել այդ աղյուսակը, կարող եք հարկավոր է խմբագրել յուրաքանչյուր տող սեղանի մեջ, ապահովելու համար յուրաքանչյուր տողը համապատասխանում է փոփոխություններին: Օրինակ, եթե ձեր սեղանին տեղադրեք նոր տող, ներքեւում գտնվող յուրաքանչյուր տող պետք է ունենա դասը փոխվի:
CSS- ն հեշտացնում է ոճի սեղանները զեբրա շերտերով: Ձեզ անհրաժեշտ չէ ավելացնել լրացուցիչ HTML հատկանիշներ կամ CSS դասեր, պարզապես օգտագործում եք nth-of-type (n) CSS ընտրիչը :
The nth-of-the-type (n) ընտրիչը կառուցվածքային կեղծ դաս է CSS- ում, որը թույլ է տալիս ոճային տարրեր հիմնվել իրենց ծնողի եւ եղբայրական տարրերի հարաբերություններում: Դուք կարող եք օգտագործել այն մեկ կամ մի քանի տարր ընտրելու համար, ըստ իրենց աղբյուրի: Այլ կերպ ասած, այն կարող է համընկնել յուրաքանչյուր տարրի հետ, որը ծնողի որոշակի տիպի երրորդ երեխան է:
Ն նամակը կարող է լինել բանալի բառ (օրինակ, տարօրինակ կամ նույնիսկ), թվ, կամ բանաձեւ:
Օրինակ, ցանկացած այլ պարբերության պիտակի վրա, դեղին գույնի գույնով, ձեր CSS փաստաթուղթը ներառում է.
p: nth- of-type (տարօրինակ) {
ֆոնային `դեղին;
}
Սկսեք ձեր HTML աղյուսակից
Նախ, ստեղծեք ձեր սեղանը, ինչպես սովորաբար գրեք այն HTML- ում: Մի շարքեր կամ սյուներ հատուկ դասեր ավելացրեք:
Ձեր ոճաթերթում ավելացրեք հետեւյալ CSS- ը.
tr: nth- of-type (տարօրինակ) {
background-color: #ccc;
}
Սա կխաղա բոլոր շարքերում գորշ ֆոնի գույնով, սկսած առաջին շարքով:
Style փոխարինող սյունակները նույն կերպ
Դուք կարող եք անել նույն ձեւը, ձեր սեղանների սյուներ: Դա անելու համար պարզապես փոխեք tr- ը ձեր CSS դասում `td: Օրինակ:
td: nth- of-type (տարօրինակ) {
background-color: #ccc;
}
Օգտագործելով բանաձեւերը նթ-տեսակի (n) ընտրիչի մեջ
Սելեկտի համար օգտագործվող բանաձեւի շարադրանքը + b է:
ա է համարը, որը ներկայացնում է ցիկլը կամ ինդեքսի չափը:
n է իրականում «n» տառը եւ ներկայացնում է հաշվիչ, որի աստղերը 0-ում են:
+ օպերատոր է, որը կարող է լինել նաեւ "-"
b- ը հանդիսանում է ամբողջական եւ ներկայացնում է օֆսեթային արժեքը, օրինակ, քանի նիշերը պետք է ընտրողը սկսի ֆոնի գույնը: Դա պահանջվում է, եթե օպերատորը ներառված է բանաձեւում:
Օրինակ, եթե ցանկանում եք ֆոնի գույն սահմանել յուրաքանչյուր 3-րդ շարքում, ձեր բանաձեւը կլինի 3n + 0: Ձեր CSS- ն կարող է նման լինել:
tr: nth-of-type (3n + 0) {
ֆոնային: slategray;
}
Օգտակար գործիքներ, օգտագործելով nth-of-type սելեկտորի օգտագործումը
Եթե դուք զգում եք, որ մի փոքր անհանգստացած է կեղծ դասի nth- ի տեսակ ընտրողից օգտվելու բանաձեւի ձեւով, փորձեք: nth Tester կայքը որպես օգտակար գործիք, որը կարող է օգնել ձեզ սահմանել սինթետիկ, որպեսզի տեսնեք ձեր տեսքը: Օգտագործեք բացվող ընտրացանկը `ընտրելու nth-of-type (դուք կարող եք նաեւ փորձարկել այլ կեղծ դասեր այստեղ, նույնպես, ինչպիսիք են nth- երեխա):