Foydali: bolalik retseptlari

Nth-child yoki: nth-of-type (farq haqida o'qing) uchun mukammal qo'llanmalarga duch kelganimda, men biroz xijolat bo'laman. Siz ularni qanchalik yaxshi tushunsangiz, shuncha ko'p CSS nerdgasmlari bo'ladi!

Bu oddiy "retseptlar" da (aslida: iboralar) men o'zboshimchalik bilan ro'yxat elementlari va tasodifiy tanlangan raqamlarning tekis ro'yxatini ishlataman. Ammo shunga o'xshash tanlovlarni olish uchun ularni qanday o'zgartirish kerakligi aniq bo'lishi kerak.

Faqat beshinchi elementni tanlang

Birinchi elementni tanlash uchun siz quyidagilarni ishlatishingiz mumkin: birinchi bola, yoki menimcha, siz ham buni amalga oshirish uchun yuqoridagilarni qanday o'zgartirish kerakligini taxmin qilishingiz mumkin.

Hammasini tanlang, lekin birinchi beshdan

Agar bu erda 10 dan ortiq element bo'lsa, ularning hammasi 5 dan oshadi.

Faqat birinchi beshlikni tanlang

Birinchisidan boshlab, har to'rtdan birini tanlang

Faqat toq yoki juftni tanlang

Oxirgi elementni tanlang

10 -ni tanlaydi, chunki bizda bu erda 10 ta element bor, lekin agar 8 bo'lsa, u 8 -ni, yoki 1290 bo'lsa, 1290 -ni tanlaydi.

Ikkinchidan oxirgi elementni tanlang

9 -ni tanlaydi, chunki bizda 10 ta element bor, lekin agar 30 ta element bo'lsa, u 29 -ni tanlaydi.

Qizig'i shundaki, birinchi farzand IE 7 tomonidan qo'llab-quvvatlangan, lekin IE 9gacha, bu erda qolgan narsalar qo'llab-quvvatlanadi. IE -dan boshqa brauzerni qo'llab -quvvatlash masalasi unchalik katta emas va agar siz IE haqida qayg'urayotgan bo'lsangiz, Selectivizr -dan foydalaning. Agar siz brauzerni qo'llab -quvvatlaydigan narsalar siz uchun qiziqarli yoki muhim bo'lsa, albatta, men qachon ishlata olaman ... bu ma'lumotni juda yaxshi kuzatib borishini ko'rib chiqing.

Oldindan rivojlanish bo'yicha trening kerakmi?

Frontend Masters - uni olish uchun eng yaxshi joy. Ularda Node.js va Full Stack-dan tashqari React-dan CSS-ga, Vue-dan D3-ga va undan tashqaridagi eng muhim texnologiya bo'yicha kurslar mavjud.

Oldindan rivojlanish bo'yicha trening kerakmi?

Frontend Masters - uni olish uchun eng yaxshi joy. Ularda Node.js va Full Stack-dan tashqari React-dan CSS-ga, Vue-dan D3-ga va undan tashqaridagi eng muhim texnologiya bo'yicha kurslar mavjud.

Izohlar

Faqat to'liq foydali !! Rahmat

Yaxshi ro'yxat, lekin men rang ko'rmanmi yoki siz yashil va qizilni aralashtiryapsizmi? Shunga qaramay, yaxshi ro'yxat. Afsuski, IE buni IE9gacha qo'llab -quvvatlamaydi (bu erda aytib o'tganingizdek)

Aslida, Kris rangni yashil rangga bo'yalgan, misollarda esa matn yo'q ^^.

Men ham buni tushundim, aniqki, vaziyatni tasvirlash uchun, lekin yashil to'pni ko'rish va darhol rangni o'qish juda kulgili edi: qizil!

Tushundim. Avvaliga men bu bolalar nima deyayotganiga o'xshardim. Men "qizil" so'zini "yashil" ga o'zgartirdim, shuning uchun unchalik g'alati emas. Ularning ikkalasi ham faqat farazdir.

Ajoyib maqola, Kris! Men aslida n-bola bu qiymatlarni parametr sifatida qabul qilganini bilmasdim. Men CSS3 bilan ko'proq ishlashim kerak, chunki men ishlab chiqarishda bunga ishonishni xohlamayman.

Ko'p sonli bolalar bog'chasining ssenariylari toq sonli to'plarga qaraganida esga tushadi. Btw. To'qimalar va boshlang'ich raqamlar bilan ayyorlikni siz qilganmisiz? Ehtimol, nth-bola uchun hal qiladigan narsa?

Yana bir ajoyib tushuntirish uchun rahmat, Kris, agar adashmasam va xato qilsam tuzatgan bo'lsam, lekin jQuery allaqachon Sizzle -ga o'rnatilgan CSS3 soxta selektorlarini qo'llab -quvvatlamaydi?

Agar siz pastki qismdagi Selectivizr havolasini nazarda tutayotgan bo'lsangiz, bu boshqacha. Bu siz yozgan haqiqiy CSS -ni ishlayotgan kutubxona.

JQuery plaginlari mavjud bo'lib, ular brauzerlarni http://www.selectivizr.com kabi qo'llab -quvvatlamaydi. jQuery $ (some_selectors) uchun biroz boshqacha sintaksisga ega.

Ba'zi jQuery tanlovchilari uchun http://standardista.com/jquery/#slcjQuery (va bu sahifada pastroq) ga qarang.

Oh, bu endi mantiqan

Ehtimol, IE uchun tekin yechim, lekin siz buni Chrome Frame -dan foydalanib (va CSS gradientlari, animatsiyalari va boshqalar) yoqishingiz mumkin.

Ushbu manba uchun rahmat! Men har xil variantlarni aniq ko'rsatib beradigan qo'llanma izlayapman: n-bola selektorlari va bu men ko'rgan eng yaxshisi. : nth-child-yaxshi CSS-ning muhim qismi va men bundan albatta foydalanaman. Yana bir bor rahmat!

Kris, pastroq IE versiyalari uchun tuzatish bormi?

Ha, odam maqolaning oxirgi xatboshisini ko'rib chiqing.

ok.

Oxirgi "Brauzerni qo'llab -quvvatlash"

Men bu usulga hali ham yangiman, lekin men hali ham saviyani yaxshi ko'raman va menimcha, men faqat sirtni chizib tashladim.

Yaxshi bajarilgan ish!!

Meni Xitoy nashriga tarjima qilish mumkinmi?

Ajoyib! Bu men uchun juda foydali.

Katta rahmat-men nth-bolani qanday ishlatishni qidiryapman!

Kris bu maqola juda zo'r, tushunish oson va juda foydali edi.

Aytgancha, men sizning tashrif buyuruvchilaringiz qaysi rezolyutsiyadan foydalanayotganini bilish uchun statistikangizni kuzatayotganingizni bilaman. Men hozirda Blackberry 9800 dan foydalanmoqdaman va sizning veb -saytingiz ekranga qanchalik mos kelishiga va uning qanchalik yaxshi ishlashiga ishonmayman, ajoyib ish! Maqolaning ko'p qismida gorizontal aylantirish panelini ishlatishning hojati yo'q edi, shuning uchun ko'p rahmat :)

Menimcha, bu ularning CSS -dagi ommaviy axborot vositalarining so'rovlari bilan bog'liq. Sahifa oynaning/ko'rish oynasining o'lchamiga qarab qulab tushadi. Asosiy sahifani ish stoli veb -brauzeriga yuklang va oynaning gorizontal hajmini kamaytiring, sahifa ko'p sonli kengliklarga moslashtiriladi.

Ajoyib maqola Kris, men hali bilmagan narsalar bor!

faqat "rahmat" demoqchiman. Sizning maqolalaringiz haqiqiy qutqaruvchidir. Va bitta veb-saytda kerakli CSS-fokuslarni topish juda ajoyib va ​​ajoyib.

Anjelika (aka Lintzi)

IE 7 faqat qisman qo'llab-quvvatlaydi: birinchi bola. Agar HTML izohi birinchi elementdan oldin bo'lsa, birinchi bola tanlovi kuchga kirmaydi.

Eski brauzerlar bu xususiyatlarni qo'llab -quvvatlamasa ham, siz jQuery -dan foydalanishingiz mumkin.

Yaxshi xususiyatlar ro'yxati. IE har doimgidek tushkunlikka tushadi

Rahmat sizga Kris! Men sizning yangi: n-bolani ishlatishga bo'lgan ishtiyoqingiz bilan o'rtoqlashaman!

Sizga ko'rsatadigan saytim yo'q, faqat men ishlab chiqqan ba'zi CSS uslublari. Men uchun ikkita yangi foydalanish. Menga matnni chapga, so'ngra yarmida o'ngga ko'rsatish uchun hoverda har xil xatti -harakatlarni ko'rsatish uchun CSS kerak edi. Men nima qilganimni uzoq tushuntirishdan ko'ra, siz kodni va uni bu erda qanday qo'llaganimni ko'rib chiqishingiz mumkin.

Ikkinchi misolda jadval tartibida ustunlar/satrlarni almashtirishdan tashqari biror narsa uchun toq/hatto ishlatiladi. Men ekran tasvirlari ustunini oldim, ularni chapga va o'ngga (toq/juft) joylashtirdim, so'ngra takd/juftlikka qarab tasvirni kattalashtirish uchun toq/juft hoverni ishlatdim, shunda zoom to'g'ri ko'rsatiladi. U shu erda.

Agar boshqa hech kim Krisning har xil n-bola misollarini qanday qilib bir-biriga bog'lash mumkinligini tushuntira olmasa, bu haqda o'ylab ko'ring: ovozni boshqarish yoki boshqa slayder. Birinchi bola, karnay ajratilgan, ovoz balandligi. Oxirgi boladan ikkinchi, n-oxirgi bola (2), yana ta'kidlangan, minimal hajm. Oxirgi bola, karnay ovozini o'chiradi (odatda qizil chiziq bilan ko'rsatiladi). Men uni kodlashni kuta olmayman!

Iltimos, agar men buni tezlashtirmasam, rahm qil. Bilaman, u mavjud bo'lgan barcha brauzerlarni qamrab olmaydi. Men bunga atigi 1-1/2 oy bo'lganman.

Men ham saytlarni kodlashda: nth-child dan foydalanishni yaxshi ko'raman. Kamroq kod shishiradi va uning ajablanarli joyi shundaki, u qancha vaziyatlarda yordam beradi.

Hey Kris

, Selectivizr-ga e'tibor berganingiz uchun tashakkur, men hozirgina wordpress-ning plagin versiyasini o'zim uchun ishlatganman: nth-child navbar-yaxshi ishlaydi

Selectivizr (http://selectivizr.com/)-bu Internet Explorer 6-8 da CSS3 psevdo-sinflari va atributlarni tanlab oladigan ajoyib dastur, PE uchun Nice JS.

Buni biroz kengaytirish uchun - menimcha, ro'yxatning oxiridan orqaga qanday borishni ko'rsatish uchun boshqa demo qo'shish yaxshi bo'lardi. Sizda: n-oxirgi-bola (2)-lekin oxirgi 3 elementni tanlash uchun (ro'yxatning kattaligidan qat'i nazar) sizga kerak bo'ladi: n-oxirgi-bola (-n+3). Yana bir ajoyib demo uchun rahmat.