Child va kontekstli CSS selektorlari.

Golovna

CSS bola selektorlari, agar ular boshqa (ota-ona) elementlar bilan bog'liq bo'lsa, ushbu turdagi elementlarga uslublarni qo'llash uchun ishlatiladigan selektorlardir.

<тег1> <тег2>... <тег3><тег4>...

Sayt selektorlari singari, bolalar tanlovchilari ham ombor tanlovchilari bo'lib, oddiy selektorlardan (sinflar, identifikatorlar va boshqalar) iborat.<тег2>і<тег3>Va men sizga yana aytaman, chunki siz qizning elementlari nima ekanligini unutgansiz, keyin siz allaqachon bilgan dumbani ko'tarib, nima deb o'ylaysiz.<тег1>Element boshqa elementga nisbatan bola deb ataladi, chunki u hissaning birinchi darajasida boshqa elementning o'rtasida joylashgan.<тег4>Bizning dumba<тег3> .

ê donkami

, A

- tse donka

Child selektorlari “>” belgisi bilan ajratilgan ikki yoki undan ortiq oddiy selektorlardan iborat bo‘lib, bu yerda avval ota, so‘ngra bola elementi, so‘ngra ushbu kichik elementning qizi va boshqalar ko‘rsatiladi.

selektor1 > selektor2 (

Uslublar selektorlari ro'yxatda qolgan elementlar bilan chegaralanadi.

Zagal sintaksisi:

">" belgisining har ikki tomonidagi bo'shliqlar joylashtirilishi mumkin yoki ular chegaralarning orqasida joylashtirilishi mumkin.

CSS bolalar tanlovchilaridan foydalanishga misol Bolalar tanlovchilari

1-band.

2-band.

Va yana bir nuqta.

Faqat birinchi xatboshida matn ko'k rangga ega. Internet Explorer

Nima uchun noto'g'ri ekanligini taxmin qila olasizmi? Yo'qmi? O'ng tomonda siz bitta elementni unutdingiz - bu aniq ko'rsatilmagan, ammo har bir HTML jadvalida ko'rinmas holda mavjud. Faqat ochiladigan va yopiladigan majburiy teglar yo'q, shuning uchun odamlar ko'pincha u haqida unutishadi. Gapirishdan oldin, ha

HTML-podruchnik Internet Explorer

Biz siz bilan hech narsani boshdan kechirmadik, shuning uchun kiritish juda kamdan-kam hollarda kerakligi aniq.

O'ylaymanki, siz bu qanday bo'lishini allaqachon taxmin qilgansiz

1. to'g'ri kiritish
2. , lekin men sizga hali ham ko'rsataman.
3. jadval > tbody > tr > td (
4. Gapirishdan oldin faqat jadvallarda keraksiz teglar ochiladigan elementlar emas, balki boshqa elementlar ham mavjud.

Amalda "unutish muammolari" ko'pincha jadvallarning o'zidan paydo bo'ladi, shuning uchun men buni hurmat qilishingizni so'rayman. Uy vazifasi. Arial shrift o'lchami 0,9em va sahifadagi istalgan fonni o'rnating.

Sahifada bir nechta sarlavhalar va paragraflarni yozing, sarlavha matnining o'lchamini va rangini ehtiyojlaringizga qarab o'zgartiring. Paragraflar o'rtasidagi post hech qanday qo'llab-quvvatlanmasdan ko'k rangda ekanligiga ishonch hosil qiling. Biroq, agar xabarlar qo'shimcha ravishda biron bir teg bilan bezatilgan bo'lsa, masalan, kursiv uchun, ular kreslolar va qizil rang bilan paydo bo'lishda aybdor. Yana bir bor ta'kidlashni istardimki, xabarning uslublarini ramkani o'rnatadigan teri yorlig'i bilan belgilashning hojati yo'q, uni universal qilish mumkin..

Yak? O'ylab ko'ring.:

Bizning vazifamiz esa chervonimdan kamroq daromad olishdir" Yana bir paragraf Keling, buni kontekst selektori wiki-ga yozamiz:

Konteyner p (
rang: qizil;
}

Shunda biz umuman kerak bo'lmagan paragraflardan qattiq xafa bo'lamiz. Bu muammo allaqachon yordam uchun osilgan:

CSS-dagi bolalar tanlovchilari
rang: qizil;
}

Konteyner > p ( Yana bir paragraf Mana, endi biz qizil tangalarimizni yo'qotdik" Ushbu bandning o'zi qismlari to'g'ridan-to'g'ri sho''ba korxonasi hisoblanadi.konteyner Birinchi xatboshi. A "ê ichki uchun bola

div Bu muammo allaqachon yordam uchun osilgan Shu tarzda, bola selektorining harakati ostida sharob yo'qolmaydi. CSS bolalar tanlovchilaridan foydalanishga misol Bunday noto'g'ri tushunchalarga ishonish juda oson, ammo bitta katta minus bor - ular brauzerlarda ishlamaydi.

Aynan shu sabablar ularning bir-biridan juda farq qilishidir. Agar siz bu erda Internetda bo'lsangiz, endi bu nimani anglatishini bilasiz Daniya turi selektorlar va nima qilish kerak. Salom, aziz o'quvchilar!

CSS selektorlari mavzusini davom ettirib, hurmatingizni tan olmoqchiman bolalar va kontekstli selektorlarning tavsifi, va shuningdek, í̈x yillik tahlil, Xushbo'y hidning turg'unligi mantig'i ortidagi parchalar hatto o'xshashdir, garchi ular yolg'onni nazarda tutsa ham. Nashrlarimda men turli mavzularda hisobotlarimni yakunlayman CSS turlari

selektorlar: ; shu qatorda; shu bilan birga Nutqdan oldin, boshqacha qilib aytganda, biz tartiblashdik turli qarashlar atribut selektorida men nazariy hisob-kitoblarimni HTML va CSS kodlariga onlayn tarzda o'zgartirishlar kiritish orqali darhol qanday tekshirish mumkinligini batafsil bayon qildim. Google Chrome :

(). Bunday tahrirlash usullarini barcha mashhur brauzerlarning yangi modifikatsiyalarida, shu jumladan Firefox uchun Firebug ()da topish mumkin. Saytning istalgan sahifasini tahrirlash orqali ushbu postning nazariy materialini o'qishingiz mumkin! Buning uchun agar siz Google Chrome-dan foydalansangiz yoki F12 tugmasini bosingі Mozilla Firefox.

().

Va endi men p yorlig'ini almashtirishni taklif qilaman, uning misolida

bola va kontekstual.

Birinchidan, keling, ulardan boshlaylik, men HTML hujjatidagi teglar ierarxiyasini ko'rsatadigan rasmni biriktirilgan paragrafga qo'yaman, uning matni yuqorida ko'rsatilgan va hozirda tahlil qilinadi:

Ushbu dizayn elementlar daraxti deb ham ataladi.

Ushbu kichik sahifada teglar o'rtasida ierarxik xabarlarni uzatuvchi konteynerlarning joylashishini aniq ko'rishingiz mumkin.

Paragraf tegi p mos yozuvlar bo'yicha pastki element hisoblanadi.

Shu bilan birga, kuchli teg divning bolasi emas, shuning uchun u p konteyneriga mos keladi.

Child CSS selektori

Elementlar daraxtidagi bola selektori to'g'ridan-to'g'ri asosiy elementning o'rtasida joylashgan, bu holda CSS selektorini yozish sintaksisi quyidagicha bo'ladi:

Uslub 2-selektorga qadar bo'ladi, lekin faqat u holda, chunki u 1-selektorning bolasi. Keling, hisobot, vikorista va elementlar daraxtidan skrinshotlarni ko'rib chiqaylik.

Masalan, sintaksisga rioya qilib, siz shunday qoida yaratishingiz mumkin: em (rang: yashil;) Ushbu qoida paragrafdagi qolgan so'zga "kursiv" bilan qo'llaniladi, chunki so'zning o'zi ochilish va yopish em teglari orasiga joylashtirilgan.

Em tegi p harfining bolasidir, chunki u uning o'rtasida joylashgan va matn o'rniga so'zning o'zi yashil rangda "kursiv" bo'ladi.

Biroq, em yorlig'i p tegining to'g'ridan-to'g'ri kichik to'plami emas, chunki u kuchli tegdan oldin kiritilgan, buning natijasida "em va kuchli formatlash teglari" paragrafining bir qismi taqiqlanmaydi.

CSS kontekst selektori

Ko'rib turganingizdek, yashil tirgaklar nafaqat to'g'ridan-to'g'ri em formatlash yorlig'iga joylashtirilgan xatboshi qismining matnini almashtirmaydi, shuning uchun so'z "kursiv" bo'ladi, balki boshqa em tegining matni ham kiritilgan. kuchli tegdan oldin ham.

Bu shuni anglatadiki, kontekst selektoriga ega bo'lgan qoida mavjud bo'lib, u uchun bola selektorini almashtirishga qo'shilgan hissa darajasi muhim emas.

Bola va kontekst selektori o'rtasida farq bor.

Keling, bizning paragrafimiz bilan kontekstual va bola selektorlarining o'zaro ta'sirining yana bir misolini ko'rib chiqaylik.

Keling, bola va kontekst selektori uchun quyidagi CSS qoidalarini yozamiz:

Div em (rang: qizil;) em (rang: yashil;)

Shundan so'ng, bizning paragrafimiz quyidagi dizaynni oladi: Ko'rib turganingizdek, juda ko'p matn, em tegidagi joylashtirishlar va kuchli, qizil ranglardagi tanlovlar mavjud, shuning uchun buning uchun kontekstli selektor qoidasi amal qiladi, keyin em tegi konteynerga kuchli va div joylashtiriladi, va kiritish darajasi, allaqachon tayinlanganidek, muhim emas. Oziq-ovqat aybdor: nega em o'rnini bosuvchi "kursiv" so'zi yashil rangda? Va hamma uchun kontekstni tanlash qoidasi tegishli. Ammo paragrafdagi matnning ushbu qismi uchun bolalar selektorining qoidasi ham to'g'ri, shuning uchun bola selektor uchun element darhol p tegining omboriga kirishi kerakligi aniq emas.

O'ng tomonda, CSS-da ustuvorlik qonuni mavjud

CSS organlari

, bu pastroq ma'lum.

Tobto ichida

Bola element selektori pad selektori tushunchasiga o'xshash xususiyatlarga ega.

Biroq, bu operatsiyalarning muhim ahamiyatini ko'rsatadigan guruchga xosdir.

Buning sababi shundaki, selektor bo'limining oqimi mutlaqo barcha elementlarni kengaytiradi, chunki bola selektori uslublarni tasniflashning birinchi darajasidagi pozitsiyalarga bo'ysundiradi.

< div>Keling, oldinga siljish yordamida bolalarni tanlash operatorining ishini baholaylik:< span>Div > r (rang: #ff0000; /* qizil */ ) < p>Bu qator qora matn uchun ona bo'ladi.< span>Bu qator diva uchun bolalar yorlig'i bo'lganlar orqali qizil rangga aylantiriladi.

Men qora adabiyotga qaytdim.

Bu yerda qora ramzlar ham bor, chunki bu span uchun otasi teg r.

Ushbu ilova investitsiya darajasiga qadar bolalar selektori operatorining ishini tasdiqlaydi. Bolalar selektorining vikoristan operatori uchun almashinuv Siz buni hurmat qilishingiz kerak

berilgan operatsiya

Bu afsonaviy Internet Explorer 6 dan boshqa barcha brauzerlar tomonidan qo'llab-quvvatlanadi. Menimcha, bu brauzerdan kam odam foydalanadi, chunki bunday noyoblari bor, shuning uchun ular uchun vaziyatdan chiqish yo'li bor, ular uchun qo'shimcha ravishda tavsiflanadi. statistika.

Ishlar to'xtab qolishga yaqin

Dasturchilar ichki o'rnatilgan elementlarga o'zlarining noyob uslublarini qo'shishni xohlashganda, ushbu turdagi bolalar element tanlovchilariga murojaat qilishadi. Hujjatning o'qilishini yaxshilash uchun CSS funktsiyalarini qisqartirish uchun shunga o'xshash selektordan foydalanish mumkin. }

Amaliyot shuni ko'rsatadiki, bu operatsiyalar ko'pincha menyu ochilganda va ular chiqib ketganda amalga oshiriladi.

Bundan tashqari, bola element selektori allaqachon ma'lum bo'lgan elementlarga noyob uslublarni belgilash uchun ishlatiladi.

Boshqa so'zlar bilan aytganda:

Asosiy > sarlavha (

/* dizayn asosiy sarlavhagacha olib boriladi */

Oldingi maqolada biz HTML-hujjatning elementlari, jumladan, asosiy elementlar o'rtasidagi mahalliy ulanishlar haqida bilib oldik.

Keling, ushbu ulanishlarni CSS-dan qanday o'zgartirish mumkinligini ko'rib chiqaylik.

Ushbu teglarni uslublashingiz kerakligini aniqlang Qaysi bog'liq sho''ba korxonalar

, boshqalarga yopishib qolmang

(masalan,