Што такое селектар CSS Нашчадак?

Структура HTML-дакумент падобная на генеалагічнае дрэва. У вашай сям'і, у вас ёсць вашы бацькі і іншыя, якія прыйшлі перад вамі. Гэта вашы продкі. Дзеці і тыя, хто прыйдуць пасля вас на гэтым дрэве вашыя нашчадкі. HTML працуе аналагічным чынам. Элементы, якія знаходзяцца ўнутры іншых элементаў з'яўляюцца іх нашчадкамі. Напрыклад, так як амаль кожны HTML элемент знаходзіцца ўсярэдзіне тэгаў , яны былі б нашчадкам таго, што элементы . Гэтыя суадносіны важна зразумець, калі вы пачынаеце працаваць з CSS і павінны быць арыентаваны на канкрэтныя элементы, каб прымяніць візуальныя стылі.

CSS селектары Нашчадак

Селектар CSS-нашчадак ставіцца да элементаў, якія знаходзяцца ўнутры іншага элемента (ці, дакладней кажучы, элемент, які з'яўляецца нашчадкам іншага элемента). Напрыклад, неўпарадкаваных спіс мае тэг з тэгамі, як нашчадкі. Давайце выкарыстоўваць наступны HTML у якасці прыкладу:

• гэта спасылка

  Тэгі LI з'яўляюцца нашчадкамі тэга UL. Тэг з'яўляецца нашчадкам абодвух тэгаў LI (дзіця нашчадак) і UL (унучкай нашчадак). Калі вы думаеце пра тое думаць пра гэта, выкарыстоўваючы прыклад сямейнага дрэва, <уль> будзе бацька, то

• будзе дзіцем гэтага элемента, і бы дзіцё
• і ўнук кнопку
  .

  Так як бы вы арыентаваны на канкрэтныя элементы вэб-старонкі, выкарыстоўваючы гэтыя селектары нашчадкаў? Па-першае, вы павінны вызначыць селектары нашчадкаў з выкарыстаннем двух (ці больш) тып селектараў, падзеленых прабеламі.

  Ці а {тэкст-аздабленне: няма; }

  У гэтым прыкладзе, стылі будуць прымяняцца толькі да лініі элемента (), які з'яўляецца нашчадкам элемента спісу элемента (

  • ). Усе астатнія спасылкі на старонкі, якія не з'яўляецца нашчадкам элемента спісу не атрымае гэты стыль.

    Адна важная рэч, каб памятаць, што гэта не мае значэння, колькі тэгаў яны знаходзяцца паміж тэгамі вы можаце выкарыстоўваць у вашым селектары нашчадка. Калі другі элемент заключаны ў любым пункце ў межах першага элемента ён будзе абраны ў якасці нашчадка.

    Калі вы хочаце, каб выбраць усе якары, якія адбываюцца ад вул элементаў, можна было б напісаць:

    уль а {тэкст-аздабленне: няма; }

    Цяпер гэтыя стылі будуць прымяняцца да любой спасылцы, якая з'яўляецца нашчадкам элемента спісу. Можна таксама напісаць гэты селектар

    уль Лі а {тэкст-аздабленне: няма; }

    Гэта нашчадак селектар, які выкарыстоўвае больш за два селектараў тыпу. У гэтым выпадку, гэта будзе ставіцца да спасылках, якія знаходзяцца ўнутры як элемент спісу, а таксама ўнутры неўпарадкаванай спісу.

    Выкарыстанне селектараў класа і ID селектары

    Селектары, што вы спускаюцца з не заўсёды павінны быць нашчадкамі тыпу. Напрыклад, уявіце, што вы мелі плошчу ўчастка (напрыклад, падраздзяленне) з атрыбутам ID з «рэкламнага шчыта». Вы можаце ўсталяваць селектар нашчадкаў ад гэтага ID:

    #billboard уль {фонавага колеру: #ccc; }

    Гэта стыль неўпарадкаванай спісу, які з'яўляецца нашчадкам элемента з ідэнтыфікатарам «шчыт». Вы можаце зрабіць тое ж самае для значэнняў класа.

    div.billboard уль {фонавага колеру: #ccc; }

    Гэта прадугледжвае, што дзяленне мае значэнне класа «шчыт». CSS вышэй будзе стыль элемента

    ўнутры любога падраздзялення, якое мае гэта значэнне класа.

    Вы можаце атрымаць сапраўды нязграбны і шматслоўны з селектараў нашчадкаў. Напрыклад, калі вы выкарыстоўваеце Dreamweaver , каб напісаць свой HTML код , ёсць параметр пры даданні новых правілаў CSS , якія будуць аўтаматычна ствараць селектар на аснове размяшчэння курсора на гэтай старонцы. Што Dreamweaver робіць у гэтым экзэмпляры , гэта стварыць дзіка падрабязны і доўгі селектар нашчадка. Гэта вельмі Спецыфічнасць не з'яўляецца неабходнай для вашай CSS працаваць. Тое, што вы хочаце зрабіць, гэта знайсці баланс паміж селектарам нашчадка, які досыць спецыфічны, так што вы можаце перайсці да дакладных элементам, якія неабходна (без кладкі тыя, якія вы не хочаце, каб паўплываць) без правілаў CSS, якія маюць селектараў, якія празмерна вялікі.