CSS хэрхэн яаж сонгох вэ?

HTML баримт бичгийн бүтэц нь гэр бүлийн модтой төстэй юм. Танай гэр бүлд тань өмнө чинь ирсэн эцэг эх болон бусад хүмүүс байна. Эдгээр нь чиний өвөг дээдэс юм. Хүүхдүүд, тэр чамайг дагасан хүмүүс чиний үр удам юм. HTML нь үүнтэй төстэй байдлаар ажилладаг. Бусад элементүүд доторх элементүүд нь тэдний үр удам юм. Жишээлбэл, бараг бүх HTML элемент нь хаягууд дотроос, тэдгээр нь элементийн удам болно. Энэ харилцаа нь CSS-тэй ажиллаж эхлэхэд таныг ойлгох нь чухал бөгөөд харагдах загварыг хэрэглэхийн тулд тусгай элементүүдийг зорилтот болгох хэрэгтэй.

CSS удамтай сонгогчид

CSS удам сонгон шалгаруулагч нь өөр нэг элемент дотор (өөрөөр хэлбэл өөр элементийн үр удам илүү элемент) илэрдэг. Жишээ нь, эрэмбэлэгдээгүй жагсаалт нь үр удамтай холбоотой хаягуудтай байдаг. Жишээ болгон дараахь HTML-г хэрэглэе:

• энэ холбоос

  ЛА шошгууд нь UL тагийн үр удам юм. A tag нь LI (хүүхдийн үр удам) ба UL (ачааны удмын) хоёулангийн удам юм. Хэрэв та үүнийг гэр бүлийн модны жишээг ашиглан бодож үзвэл

  нь эцэг,
  • нь тухайн элементийн хүүхэд байх бөгөөд нь
  • болон түүний үр удмын хүүхэд болно.
    .

    Тэгэхээр эдгээр удамшуулагчийг ашиглан вэб хуудсанд тодорхой элементүүдийг хэрхэн чиглүүлэх вэ? Нэгдүгээрт, удам сонгогчдыг зайгаар тусгаарлагдсан хоёр (буюу түүнээс дээш) төрөл сонгогчийг ашиглан тодорхойлох хэрэгтэй.

    li a {text-decoration: none; }

    Энэ жишээнд загвар нь зөвхөн элементийн жагсаалт (

    • ) -ын үр удам () -д хамаарна. Жагсаалтын зүйлийн удам биш бусад хуудсууд энэ хэв загварыг авахгүй.

      Анхаарах нэг чухал зүйл бол танай удам сонгогчдын ашиглаж буй шошгонуудын хооронд хичнээн олон шошготой байх нь хамаагүй юм. Хэрэв хоёр дахь элемент нь эхний элементийн хаа сайгүй оршвол түүнийг үр удмаар сонгоно.

      Хэрэв та бүх элементүүдээс ирсэн бүх зангууг сонгохыг хүсвэл дараах зүйлийг бичнэ үү:

      ul a {text-decoration: none; }

      Одоо эдгээр загварууд нь жагсаалтын зүйлийн үр удам болох холбоосод хамаарна. Та мөн энэ сонголтыг бичиж болно

      ul li a {text-decoration: none; }

      Энэ нь хоёроос илүү төрлийн сонгон шалгаруулагчийг ашигладаг удам сонгогч юм. Энэ тохиолдолд, энэ нь жагсаалт-item доторх холбоосууд, мөн эрэмбэлэгдээгүй жагсаалт дотор хамаарна.

      Class Selectors болон ID Selectors-ийг ашиглах

      Таны бууж байгаа сонгон шалгаруулагч нар үргэлж удамшин бичиж байх шаардлагагүй. Жишээ нь, та "самбар" -ын ID шинж чанар бүхий сайтыг (хуваахтай адил) төсөөлөөд үзээрэй. Та ID-ийн үр удам сонгогчийг тохируулж болно:

      #billboard ul {background-color: #ccc; }

      Энэ нь "самбарт" -ын ID дугаартай элементийн үр удам болох эрэмбэлээгүй жагсаалтыг хэвлэнэ. Та ангийн утгуудад ижил зүйлийг хийж болно.

      div.billboard ul {background-color: #ccc; }

      Энэ нь "самбар" гэсэн ангиллын утгатай гэж үздэг. Дээрх CSS нь энэ ангийн утгыг агуулах хэсгийн доторх

      элементийг хэвлэнэ.

      Чи удалгүй сонгон шалгаруулах ур чадвартай хүнд гартаа авч болно. Жишээлбэл, Dreamweaver-ийг HTML кодоо бичихэд ашигладаг бол таны курсорын байршлын дагуу сонгогчийг автоматаар үүсгэх шинэ CSS дүрмийг нэмж тохируулах болно. Иймэрхүү Dreamweaver юуг хийдэг вэ гэвэл зэрлэг анивчсан, урт удам сонгон шалгаруулагчийг бий болгоно. CSS таны ажиллахад тийм онцгой онцлог шаардлагагүй. Та юу хийхийг хүсч байгаа нь үр удам сонгогч хоёрын хоорондын тэнцвэрийг олж авахын тулд (та нөлөөлөхийг хүсэхгүй байгаа хүмүүсээс өөр загвар зохион бүтээхгүйгээр) өрөмдөж болох бөгөөд ингэснээр хэт сонгосон сонгосон CSS дүрмүүдгүйгээр том.