Разберете какъв е селекционерът за наследници на CSS

Структурата на HTML документ е подобна на родословно дърво. Във вашето семейство имате вашите родители и други, които са дошли пред вас. Това са вашите предци. Децата и тези, които идват след теб на това дърво са твои потомци. HTML работи по подобен начин. Елементи, които са вътре в другите елементи, са техните потомци. Например, тъй като почти всеки HTML елемент е вътре в тагове, те ще бъдат потомци на това елементи. Тази връзка е важна, за да разберете, когато започнете да работите с CSS и трябва да насочите конкретни елементи, за да приложите визуални стилове.

Селектори на потомци на CSS

Селектор на CSS потомци се отнася за елементите, които са в друг елемент (или по-точно посочен, елемент, който е потомък на друг елемент). Например, неорганизиран списък има маркер с етикети като потомци. За пример, използвайте следния HTML:

• това е връзка

Най- LI маркерите са потомци на UL маркер. Най- А маркер е потомък на и двете на LI (потомък на дете) и UL (наследник на внука). Ако мислите за това, помислете за това, като използвате примерното родословно дърво,

ще бъде родител,
• ще бъде детето на този елемент и ще бъде детето на
• и внукът на
  .

  Как ще насочите конкретни елементи в уеб страница чрез тези селектори на потомци? Първо, трябва да дефинирате селекторите за низходящи, като използвате два (или повече) селектора тип, разделени с интервали.

  li a {текст-декорация: няма; }

  В този пример стиловете ще се прилагат само за елемент на връзка (), който е потомък на елемент от списъка (

  • ). Всички останали връзки на страницата, които не са потомци на елемент от списъка, няма да получат този стил.

    Едно важно нещо, което трябва да запомните, е, че няма значение колко маркери са между маркерите, които може да използвате в селектора на наследника си. Ако вторият елемент е затворен навсякъде в първия елемент, той ще бъде избран за потомък.

    Ако искате да изберете всички котви, които са произлезли от елементите ul, ще напишете:

    ul a {текст-украса: няма; }

    Тези стилове ще се прилагат към всяка връзка, която е потомък на елемент от списъка. Можете също да напишете този селектор

    ul li a {текст-украса: няма; }

    Това е селектор за низходящ, който използва повече от два селектора тип. В този случай това се отнася за връзки, които са вътре в списъка като елемент от списъка, а също и вътре в несъответстващ списък.

    Използване на селектори на класове и селектори на идентификатори

    Селекторите, от които слизате, не винаги трябва да бъдат тип потомци. Например, представете си, че сте имали област на сайта (като разделение) с идентификационен атрибут на "билборд". Бихте могли да настроите избрания наследник на този идентификатор:

    #billboard ul {цвят на фона: #ccc; }

    Това би означавало неразреден списък, който е потомък на елемент с идентификатор на "билборд". Можете да направите същото за класовите стойности.

    div.billboard ul {цвят на фона: #ccc; }

    Това предполага, че разделянето има класова стойност на "билборд". CSS по-горе би стил на

    елемент вътре във всяко отделение, което има тази стойност на класа.

    Можете да получите наистина тежки ръка и подробно с наследници селектори. Ако например използвате Dreamweaver за писане на HTML кода, има настройка, когато добавяте нови правила за CSS, които автоматично ще създадат селектора въз основа на разположението на курсора на тази страница. Това, което Dreamweaver прави в този случай, е да създадете див многослоен и продължителен селектор на потомци. Тази особеност не е необходима, за да работи вашата CSS. Това, което искате да направите, е да намерите баланс между низходящ селектор, който е достатъчно специфичен, за да можете да пробиете до точните елементи, от които се нуждаете (без тези, които не желаете да повлияете), без да имате правила за CSS, голям.