Tajriba ishi №11 Mavzu: Selektorlar va qoidalar. Ishdan maqsad

Bolalik selektori

Ba'zi hollarda bizni ma'lum bir tarkibiy elementning barcha "avlodlari" qiziqtirmaydi, lekin faqat darhol - "nabiralar" yoki "nabiralar" emas, balki faqat "bolalar" (bola). Tanlovchi > qoidasidan faqat bevosita bolaga tegishli ekanligini ko'rsatish uchun> belgisini ishlatadi.

Quyidagi misolda selektor ko'rsatilgan bo'lib, unga ko'ra ma'lum bir "maxsus" jadval jadvalining (jadvalining) n (td) n katagida 1-darajali sarlavha (h1) qizil rangda ko'rsatiladi. Agar katakda ichki jadval mavjud bo'lsa, ushbu tavsif endi uning kataklaridagi sarlavhalarga taalluqli emasligiga e'tibor bering.

table.special td>h1 { color: red; }

Opa-singil selektorlar

Opa-singil selektorlar ba'zi tarkibiy elementlarning ota-onalarning birining avlodlari bo'lishi va ulardan biri darhol ikkinchisidan oldinroq bo'lishi muhim bo'lgan hollarda qo'llaniladi. Bunday holda, selektorda "+" belgisi ishlatiladi.

Quyidagi misol juda aniq vaziyatni aks ettiradi. Qoidaga ko'ra, oldingi matndan sarlavhalarni muhim chuqurchaga (margin-top xususiyati) ajratish maqsadga muvofiqdir. Bunday ofset, masalan, 20-30 piksel qiymatida o'rnatilishi mumkin. Va har xil darajadagi sarlavhalar orasida qandaydir kirish matni bo'lsa yaxshi ko'rinadi. Ammo ma'lum bo'lishicha, ba'zi hollarda, masalan, 1 va 2-darajali sarlavhalar orasida bunday matn yo'q. Ya'ni, bu sarlavhalar to'g'ridan-to'g'ri bir-birini ta'qib qiladi. Shunda ortib borgan chuqurlik aniq kerak emas.

Shunday qilib, quyidagi uslubiy qoidalar shuni ko'rsatadiki, 2-darajali sarlavha (h2) odatda oldingi matndan 30px to'ldirish bilan ajralib turadi. Ammo u 1-darajali sarlavhaning orqasida (h1) to'g'ridan-to'g'ri orqada qolganda, bu to'ldirish 15 pikselgacha kamayadi. Ikkinchi deklaratsiyada opa-singillar tanlovchisidan foydalaniladi.

h2 { margin-top: 30px;}

h1+h2 { margin-top: 15px;}

3. Selektorlar foydalanib sahifa yarating?

h1{

color: red

}

span {

background-color: yellow;

}
strong {

color: rebeccapurple;

}
em {

color: rebeccapurple;

}

2.