CSS murosasiz selektori nima?

HTML hujjatning tuzilishi oilaviy daraxtga o'xshaydi. Oilangizda ota-onangiz va sizdan oldin kelgan boshqalar bor. Bu sizning ajdodlaringiz. Bolalar va sizdan keyin keladigan daraxtlar sizning avlodlaringizdir. HTML shunga o'xshash usulda ishlaydi. Boshqa elementlar ichidagi elementlar ularning avlodlari hisoblanadi. Masalan, deyarli har bir HTML elementi teglar ichidadir, ular elementlarining avlodi bo'lar edi. CSS bilan ishlashni boshlaganingizda va ingl. Uslublarni qo'llash uchun muayyan elementlarga ega bo'lishingiz kerak.

CSS-dan ajralib turuvchi selektorlar

CSS-dan tanlangan selektsiya boshqa elementning ichidagi elementlarga (yoki aniqroq ifodalangan, boshqa elementning avlodi bo'lgan element) qo'llaniladi. Masalan, ro'yxatga olinmagan ro'yxatda avlodlar sifatida teglar mavjud. Masalan, quyidagi HTMLni ishlatamiz:

• Bu havola

  LI teglari UL tegining avlodlari. A yorlig'i ham LI (bola avlodi) va UL (nevarasi avlodi) belgilarining avlodi. Agar siz oilaviy daraxt namunasidan foydalanib, bu haqda o'ylab ko'rsangiz,

  ota-ona bo'ladi,
  • bu elementning bolasi bo'ladi va
  • bolasi va nevarasi bo'ladi
    .

    Xo'sh, qanday qilib bu noyob tanlovchilarni ishlatib, veb-sahifadagi muayyan elementlarni qanday qilib maqsad qilib olasiz? Birinchidan, bo'shliqlar bilan ajratilgan ikkita (yoki undan ko'p) tipdagi tanlovchidan foydalanib, avlodning tanlovchilarini aniqlash kerak.

    li {text-decoration: none; }

    Ushbu misolda uslublar faqat ro'yxat element elementining (

    • ) avlodi bo'lgan bog'lanish elementiga () amal qiladi. Ro'yxat elementining avlodi bo'lmaydigan sahifadagi barcha boshqa ishoratlar bu uslubni qabul qilmaydi.

      Esda tutish kerak bo'lgan muhim narsa shundaki, ular sizning nasl selektorida foydalanadigan teglar orasidagi qancha tegni nazarda tutishi muhim emas. Agar ikkinchi element birinchi element ichida joylashgan bo'lsa, u avlod sifatida tanlanadi.

      Ul elementlaridan kelib chiqqan barcha latchalarni tanlashni xohlasangiz, quyidagilarni yozishingiz mumkin:

      ul a {matn-dekoratsiya: yo'q; }

      Endi, bu uslublar ro'yxat elementining avlodi bo'lmish barcha havolalarga qo'llaniladi. Siz shuningdek, bu tanlovchini yozishingiz mumkin

      ul li a {matn-bezatish: yo'q; }

      Bu ikki turdagi tanlangan selektorlardan foydalanadigan avlodning selektoridir. Bunday holatda, bu ro'yxat elementining ichki qismidagi va shuningdek tartib belgilanmagan ro'yxatga kiritiladigan linklarga nisbatan qo'llaniladi.

      Sinf tanlash va identifikatorlarini tanlash

      Sizdan tushayotgan selektorlardan doimo turdagi avlodlar bo'lish shart emas. Misol uchun, "billboard" identifikatori identifikatori bilan saytning (masalan, bo'linma) maydoni borligini tasavvur qiling. Siz ushbu identifikatorning nasl-kodini tanlashingiz mumkin:

      #billboard ul {fon-rang: #ccc; }

      Bu "billboard" identifikatori bo'lgan elementning avlodi bo'lgan tartiblanmagan ro'yxatga kiritiladi. Sinf qiymatlari uchun xuddi shunday qilishingiz mumkin.

      div.billboard ul {fon-rang: #ccc; }

      Bu degani, divizionning "billboard" ning sinf qiymati bor. Yuqoridagi CSS bu sinfga ega bo'lgan har qanday bo'linmada

      elementni tarbiyalaydi.

      Chindan ham og'ir alomat va nozik tanlovchilar bilan tanishishingiz mumkin. Misol uchun, agar siz HTML kodingizni yozish uchun Dreamweaverdan foydalansangiz, kursorni o'sha sahifaga joylashtirishga asoslangan selektorni avtomatik ravishda yaratadigan yangi CSS qoidalari qo'shilganda sozlama mavjud. Ushbu misollarda Dreamweaver qanday ishlaydi, vahshiy tarzda batafsil va uzoq avlodni tanlash vositasi. CSS-ning ishlashi uchun u qadar o'ziga xoslik yo'q. Nima qilishni istasangiz, kerakli elementlarga (stilning ta'sirlanishini xohlamasdan) kerakli elementlarga (masalan, ta'sir o'tkazmoqchi emassiz) pastki qismga ega bo'lgan CSS-qoidalarga ega bo'lmasdan, siz aniqroq bo'lgan selektor o'rtasida muvozanatni topish kerak. katta.