CSS ұрпақ таңдаушысы деген не?

HTML құжатының құрылымы отбасылық ағашқа ұқсас. Отбасыңызда ата-аналарыңыз және алдыңдардан келгендер бар. Бұл сіздің ата-бабаларыңыз. Балалар мен сендерден кейін сол ағашқа келгендерің ұрпақтарың. HTML ұқсас жұмыс істейді. Басқа элементтердің ішіндегі элементтер олардың ұрпақтары болып табылады. Мысалы, әрбір HTML элементі тегтерінің ішінде болғандықтан, олар элементтерінің ұрпағы болар еді. Бұл қатынас CSS-мен жұмыс істей бастағанда және визуалды мәнерлерді қолдану үшін белгілі бір элементтерге мақсатталған кезде түсіну маңызды.

CSS жынысы селекторлары

CSS-тегінің селекторы басқа элемент ішіндегі элементтерге (немесе дәлірек айтылған, басқа элементтің ұрпағы болып табылатын элемент) қолданылады. Мысалы, реттелмеген тізімде ұрпақ ретінде тегтермен тег бар. Мысал ретінде келесі HTML-ді қолданайық:

• Бұл сілтеме

  LI тегтері UL тегінің ұрпақтары болып табылады. A тегі - LI (баланың ұрпағы) және UL (немересі ұрпағы) тегтерінің ұрпағы. Егер сіз бұл туралы отбасы үлгісінің мысалын ойласаңыз,

  ата-ана болар еді,
  • бұл элементтің баласы болады және
  • және
    .

    Мәселен, сіз қандай-да бір элементтерді веб-беттегі осы ұрпақ селекторларды қалай қолдана аласыз? Алдымен, бос орындармен бөлінген екі (немесе одан да көп) түрдегі селекторларды пайдалану арқылы ұрпақ селекторларын анықтау керек.

    li a {text-decoration: none; }

    Бұл мысалда стильдер тізім элементі элементінің (

    • ) ұрпағы болатын сілтеме элементіне () ғана қолданылатын болады. Тізім элементінің ұрпағы болып табылмайтын беттегі барлық басқа сілтемелер осы стильді ала алмайды.

      Еске сала кететін маңызды нәрсе - сіздің тұқым селекторларында қолдануға болатын тегтер арасында қанша тегтің бар екендігі маңызды емес. Егер екінші элемент бірінші элементтің кез-келген жерінде болса, ол ұрпақ ретінде таңдалады.

      Егер Сіз элементтерден шыққан барлық якорьдерді таңдағыңыз келсе, сіз:

      ul a {мәтінді безендіру: жоқ; }

      Енді бұл стильдер тізім элементінің ұрпағы болып табылатын кез-келген сілтемеге қолданылады. Сіз бұл селекторды жаза аласыз

      ul li a {мәтінді безендіру: жоқ; }

      Бұл екі түрден артық селекторларды пайдаланатын ұрпақ селекторы. Бұл жағдайда бұл тізім тізімінде және сілтемелердің ішіндегі сілтемелерге қолданылатын болады.

      Класс селекторларын және ID селекторларын пайдалану

      Сізден түсіп келе жатқан селекторлар әрдайым ұрпақ болу керек емес. Мысалы, сізде «жарнама тақтасы» атрибуты бар сайттың аумағы (бөлу секілді) бар екенін елестетіңіз. Осы идентификатордың ұрпақ селекторын орнатуға болады:

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

      Бұл «billboard» идентификаторы бар элементтің ұрпағы болып табылатын реттелмеген тізімге әсер етеді. Сіз класс құндылықтары үшін де солай істей аласыз.

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

      Бұл бөлімнің «билбордтың» сыныптық мәні бар деп есептейді. Жоғарыдағы CSS осы сынып мәні бар кез келген бөлімнің ішіндегі

      элементін стильді етеді.

      Сіз өзіңіздің ұрпақ селекторларымен шынымен ауыр қолдарыңыз бен вербалды аласыз. Мысалы, HTML кодын жазу үшін Dreamweaver қолданбасын пайдалансаңыз, курсорды осы бетте орналастыруға негізделген селекторды автоматты түрде жасайтын жаңа CSS ережелерін қосқанда параметр бар. Бұл жағдайда Dreamweaver қандай жасампаз және ұзақ ұрпақты селектор жасайды. CSS-тің жұмыс істеуі үшін бұл ерекше ерекшелік қажет емес. Сіз жасағыңыз келетін нәрсе селекторлар арасындағы теңгерімді табу, ол өте қажет болатын нақты элементтерге (әсер етпейтін сәндеуі жоқ) CSS ережелерінсіз өте селекторларға ие болу үшін, үлкен.