CSS-lərin Selektoru nədir?

Bir HTML sənədinin strukturu ailə ağacına bənzəyir. Ailənizdə valideynləriniz və sizdən əvvəl gələnlər var. Bunlar atalarınızdır. Uşaqlar və səndən sonra gələn ağaclar sizin nəslinizdir. HTML eyni şəkildə işləyir. Digər elementlər içərisində olan elementlər onların nəslindəndir. Məsələn, demək olar ki, hər bir HTML elementi tags içərisində olduğundan, bu elementlərinin bir nəsli olacaqdır. Bu əlaqələr, CSS ilə işə başlamağınız və anlayışların vizual üslubları tətbiq etmək üçün xüsusi elementləri hədəf alması üçün anlamaq üçün vacibdir.

CSS nəsli seçicilər

CSS nəsli seçicisi başqa bir elementin içində olan elementlərə (ya da daha dəqiq ifadə edilmiş, başqa elementin nəsli olan elementə) tətbiq olunur. Məsələn, sıralanmamış bir siyahıda nişan kimi etiketləri olan bir etiket var. Aşağıdakı HTML nümunəsi kimi istifadə edək:

• Bu bir bağlantıdır

  LI etiketləri UL etiketinin nəslindəndir. A tag həm LI (uşaq nəslindən) və UL (nəvə nəvəsi) etiketlərinin bir nəslindəndir. Bu ailənin ağac nümunəsindən istifadə etməyi düşünsəniz,

  , valideyn olacaq,
  • bu elementin uşağı olacaq və
  • və uşağın nəvəsi olacaqdır.
    .

    Beləliklə, bu nəsil seçiciləri istifadə edərək, veb səhifəsində xüsusi elementləri necə hədəfə alacaqsınız? Birincisi, boşluqlar ilə ayrılmış iki (və ya daha çox) tipli seçicilərdən istifadə edərək, torun seçicilərini təyin etməlisiniz.

    li a {mətn-bəzək: none; }

    Bu misalda, üslub yalnız bir element elementinin (

    • ) nəslindən olan bir keçid elementinə () aiddir. Bir səhifə elementinin nəslindən olmayan digər bütün linklər bu üslubu almır.

      Xatırlamaq vacibdir ki, sizin nəsil seçicinizdə istifadə edə biləcəyiniz etiketlər arasında nə qədər etiket var? İkinci element ilk element içərisində hər hansı bir yerə qoşulsa, bu nəsil kimi seçiləcək.

      UL elementlərindən gələn bütün çapa seçmək istəyirsinizsə, yaza bilərsiniz:

      ul bir {text-decoration: none; }

      İndi bu üslublar siyahı elementinin nəslindən olan hər hansı bir linkə tətbiq ediləcək. Bu seçicini də yaza bilərsiniz

      ul li a {text-decoration: none; }

      Bu, iki növdən çox seçici istifadə edən bir nəsil seçicidir. Bu vəziyyətdə, bu siyahıdakı maddə və içərisində olan birbaşa əlaqələrin siyahısı daxilində tətbiq olunacaq.

      Sınıf Seçiciləri və ID Seçicilərindən istifadə

      Sizdən azalan etdiyiniz seçicilər həmişə nəslin torpağına çevrilməməlidirlər. Məsələn, sitenizin bir bölümü (bir bölmə kimi) "billboard" kimlik atributu ilə təsəvvür edin. Bu kimlikdən bir soyuducu seçici qura bilərsiniz:

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

      Bu, "billboard" kimliyinə malik bir elementin soyundan olan unordered siyahısını tərtib edəcəkdir. Sınıf dəyərləri üçün eyni şeyi edə bilərsiniz.

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

      Bu, bölünmənin "billboard" un bir sinif dəyəri olduğunu düşünür. Yuxarıdakı CSS, bu sinif dəyəri olan hər hansı bir bölmənin içərisində

      elementini tərzdə tutacaqdır.

      Nəhayət seçicilərlə həqiqətən ağır və əlverişli məlumat əldə edə bilərsiniz. Məsələn, HTML kodunuzu yazmaq üçün Dreamweaver istifadə etsəniz, kursorunuzun həmin səhifəyə yerləşdirilməsinə əsasən seçiciyi avtomatik olaraq yaradan yeni CSS qaydaları əlavə edərkən bir ayar var. Bu nümunələrdə Dreamweaver'ın nə etdiyi bir vəhşicəsinə verbose və uzun nəsil seçicisi yaradır. CSS -nin işləməyiniz üçün bu çox spesifiklik lazım deyil. Nə etmək istəyirsənsə, lazım olan dəqiq elementləri (təsir etmək istəmədiyinizi üslubu olmadan) aşağıya keçə bilən seçiciləri olan CSS qaydalarına ehtiyac olmadan dəqiqləşdirmək üçün kifayət qədər xüsusi bir torun seçicisi arasında bir tarazlıq tapın böyük.