භාවිතා කිරීම: nth-of-type (n) වගු සමඟ
මේස කියවීමට පහසු වන පරිදි, විකල්ප පසුබිම් වර්ණ සහිත පේළි පෙළ ගැස්වීම බොහෝ විට ප්රයෝජනවත් වේ. අච්චුවක හැඩය සඳහා වඩාත් පොදු ක්රමයක් වන්නේ සෑම පේළියක්ම පසුබිම් වර්ණය සකස් කිරීමයි. මෙය බොහෝවිට "සෙබළ තීරු" ලෙස හැඳින්වේ.
ඔබට මෙය කළ හැකි වන්නේ CSS පන්තිය සමඟ සෑම අනෙක් පේළියම සකසමින් පසුව එම පන්තියේ ශෛලිය නිර්වචනය කිරීමෙනි. මෙය ක්රියාත්මක වන නමුත් ඒ සඳහා හොඳම හෝ වඩාත්ම කාර්යක්ෂම ක්රමයක් නොවේ.
මෙම ක්රමය භාවිතා කරන විට, ඔබට එම වගුව සංශෝධනය කිරීමට අවශ්ය වන සෑම අවස්ථාවකදීම සෑම පේළියකම වෙනස්කම් වලට අනුරූපී වන පරිදි වගුවෙහි සෑම පේළියකම සංස්කරණය කිරීමට ඔබට සිදු වනු ඇත. උදාහරණයක් ලෙස, ඔබ ඔබේ වගුව සඳහා නව පේළියක් ඇතුලත් කර ඇත්නම්, පහත දැක්වෙන සෑම පේළියක්ම පංතිය වෙනස් කරගත යුතුය.
CSS මගින් Zebra තීරු සමග ශිලාලේඛන පහසු කිරීමට පහසු වේ. ඔබට අතිරේක HTML ගුණාංග හෝ CSS පංති එකතු කිරීමට අවශ්ය නොවේ, ඔබ පමණක් භාවිතා කරන්න: nth-of-type (n) CSS තේරීම් කරන්නා.
: Nth-of-type (n) තේරීම යනු CSS හි ව්යුහාත්මක ව්යාජ-පංතියකි. එමගින් ඔබට දෙමාපියන් සහ සහෝදර සහෝදරියන්ට ඔවුන්ගේ සම්බන්ධතා පදනම් කර ගත හැකිය. ඒවායේ ප්රභවයේ අනුපිළිවෙල මත මූලද්රව්ය එකක් හෝ කිහිපයක් තේරීමට ඔබට එය භාවිතා කළ හැකිය. වෙනත් වචනවලින් කිවහොත්, එය සිය දෙමාපියගේ එක්තරා ආකාරයේ nth දරුවා වන සෑම අංගයක්ම සපුරාගත හැකිය.
අක්ෂරය n අත්යාවශ්ය වන අතර, එය අංකයක් හෝ සූත්රයක් විය හැක.
නිදසුනක් ලෙස, කහ පැහැති පසුබිම් වර්ණයකින් සෑම අනෙක් ඡේදයේම ටැගය සකස් කිරීමට ඔබගේ CSS ලේඛනය ඇතුලත් වනු ඇත:
p: nth-of-type (odd) {{
පසුබිම: කහ;
}}
ඔබේ HTML වගුව සමඟ ආරම්භ කරන්න
පළමුව, ඔබ සාමාන්යයෙන් HTML ලෙස ලිවිය හැකි පරිදි ඔබේ වගුව නිර්මාණය කරන්න. පේළි හෝ තීරු වලට විශේෂිත පන්ති එකතු නොකරන්න.
ඔබගේ විලාසිතාවේදී පහත සඳහන් CSS එකතු කරන්න:
tr: nth-of-type (odd) {{
පසුබිම් වර්ණය: #ccc;
}}
පළමු පේළියෙන් ආරම්භ වන අළු පැහැති පසුබිම් වර්ණ සමඟ සෑම අනෙක් පේළියම හැඩගස්වනු ඇත.
එකම ආකාරයෙන් වෙනස්වන තීරු
ඔබේ වගු වල තීරු වලට සමාන ආකාරයේ මෝස්තරයක් කළ හැකිය. එසේ කිරීමට, ඔබේ CSS පන්තිය ටීඩී ටී ට්රේ. උදාහරණයක් වශයෙන්:
td: nth-of-type (odd) {{
පසුබිම් වර්ණය: #ccc;
}}
Nth-of-type (n) තේරීම තුල Formulas භාවිතා කිරීම
තේරිය හැකි සූත්රය සඳහා උපභාෂාව + b වේ.
a යනු චක්රය හෝ දර්ශක ප්රමාණය නියෝජනය කරන සංඛ්යාවක් වේ.
n යනු සැබැවින්ම "n" අකුර සහ නිරූපණය වන කවුළුවකි.
+ "-" යනු ක්රියාකරු වන අතර එය "-"
b යනු පූර්ණ සංඛ්යාවක් සහ offset අගයයි. උදාහරණයක් ලෙස, පසුතල වර්ණය යෙදීමෙන් තේරීම ඇරඹිය යුත්තේ කොපමණ ප්රමාණයක් පේළියකටද යන්නයි. සූත්රයේ ක්රියාකරුට ඇතුළත් කළහොත් මෙය අවශ්ය වේ.
උදාහරණයක් ලෙස, සෑම තෙවන පේළිය සඳහා පසුබිම් පාටක් සකස් කිරීමට අවශ්ය නම්, ඔබේ සූත්රය 3n + 0 වේ. ඔබගේ CSS මෙවැන්නක් පෙනේ:
tr: nth-of-type (3n + 0) {
පසුබිම: ස්ඨුටේද්රය;
}}
Nth-of-type selector භාවිතා කිරීම සඳහා ප්රයෝජනවත් මෙවලම්
ව්යාජ පන්තියේ nth-of-type selector භාවිතා කරන සූත්රයේ ඔබ ටිකක් අපහසුතාවයට පත් වී ඇත්නම්, ඔබට අවශ්ය පරිදි පෙනුම ලබා ගැනීම සඳහා රීති අර්ථ දැක්වීමට උදව් කළ හැකි ප්රයෝජනවත් මෙවලමක් ලෙස: nth Tester අඩවිය උත්සාහ කරන්න. Nth-of-type තෝරා ගැනීමට ඩවුන්ලෝඩ් මෙනුව භාවිතා කරන්න (ඔබටත් nth-child වැනි වෙනත් ව්යාජ පන්තීන්ටද අත්හදා බැලිය හැකිය).