Выкарыстанне: п-о-тыпу (п) з дапамогай табліц
Для таго, каб табліцы лягчэй чытаць, часта бывае карысна радкоў у стылі з чаргаваннем колеру фону. Адным з найбольш распаўсюджаных спосабаў стыляў табліцы, каб усталяваць колер фону любы іншы радкі. Гэта часта згадваецца як «зебра».
Вы можаце зрабіць гэта, усталяваўшы любы шэраг з класам CSS, а затым вызначэнне стылю для гэтага класа. Гэта працуе, але гэта не самы лепшы і самы эфектыўны спосаб пайсці пра гэта.
Пры выкарыстанні гэтага метаду, кожны раз, калі вам трэба змяніць гэтую табліцу, магчыма, прыйдзецца змяніць кожную радок у табліцы, каб пераканацца, што кожны шэраг ўзгадняецца з зменамі. Напрыклад, калі ўставіць новы радок у табліцу, усе астатнія радкі ніжэй гэтага трэба мець клас змяніўся.
CSS дазваляе лёгка табліцах стыляў з зебрай. Вам не трэба дадаваць якія - небудзь дадатковыя HTML атрыбуты або класы CSS, вы проста выкарыстоўваць: п-ы з-тыпу (п) селектар CSS .
: (П) селектар п-га з-тыпу з'яўляецца структурным псеўда-клас у CSS, што дазваляе ўкладваць элементы на аснове іх адносіны да бацькоўскіх і роднасным элементам. Вы можаце выкарыстоўваць яго, каб выбраць адзін або некалькі элементаў, заснаваных на іх зыходным парадку. Іншымі словамі, ён можа адпавядаць кожны элемент, які з'яўляецца n-й дзіця пэўнага тыпу яго з бацькоў.
Літара п можа быць ключавое слова (напрыклад, цотных або няцотных), лік або формулу.
Напрыклад, каб стыль любы іншы пункт тэг з жоўтым колерам фону, ваш CSS дакумент будзе ўключаць у сябе:
р: п-га з-тыпу (няцотныя) {
фон: жоўты;
}
Пачніце з HTML табліцы
Па-першае, стварыць табліцу, як вы звычайна пісаць у HTML. Ці не дадавайце ніякіх спецыяльных класаў для радкоў або Стоўбцаў.
У табліцы стыляў, дадайце наступны CSS:
тр: п-га з-тыпу (няцотныя) {
колер фону: #ccc;
}
Гэта стыль кожнай другой радкі з шэрым колерам фону, пачынаючы з першай радком.
Стыль Пераменны Стоўбцы такім жа чынам,
Вы можаце зрабіць такі ж стыль для слупкоў у табліцах. Каб зрабіць гэта, проста зменіце тр у класе CSS для TD. Напрыклад:
ГД: п-га з-тыпу (няцотныя) {
колер фону: #ccc;
}
Выкарыстанне формул ў п-м-о-тыпу (п) Selector
Сінтаксіс для формулы, якая выкарыстоўваецца ў селектары з'яўляецца + Ь.
а ўяўляе сабой лік, якое прапануе цыкл або індэкс памеру.
п на самай справе літара «п» і ўяўляе сабой лічыльнік, у якім зоркі на 0.
+ З'яўляецца аператарам, які таксама можа быць «-»
б ўяўляе сабой цэлы лік, і ўяўляе сабой значэнне, напрыклад зрушэнне, колькі радкоў ўніз варта селектары пачаць ужываць колер фону. Гэта неабходна, калі аператар ўваходзіць у формулу.
Напрыклад, калі вы хочаце, каб усталяваць колер фону для кожнага 3-га шэрагу, вашая формула будзе 3n + 0. Ваш CSS можа выглядаць наступным чынам:
тр: п-га з-тыпу (3n + 0) {
фон: slategray;
}
Карысныя інструменты для Выкарыстоўваючы п-о-тыпу Selector
Калі вы адчуваеце сябе крыху бянтэжачыся формулай аспектам выкарыстання псеўда-клас п-о-тыпу селектара, паспрабуйце: п-й сайт Tester як карысны інструмент, які можа дапамагчы вам вызначыць сінтаксіс для дасягнення патрэбнага эфекту. Выкарыстоўвайце выпадальнае меню для выбару п-га з-тыпу (вы таксама можаце паэксперыментаваць з іншымі псеўда-класаў тут, таксама, напрыклад, п-й дзіця).