Структурата на HTML документ е подобна на родословно дърво. Във вашето семейство имате вашите родители и други, които са дошли пред вас. Това са вашите предци. Децата и тези, които идват след теб на това дърво са твои потомци. HTML работи по подобен начин. Елементи, които са вътре в другите елементи, са техните потомци. Например, тъй като почти всеки елемент на HTML е вътре в маркерите
, те ще бъдат потомци на тези елементи. Тази връзка е важна, за да разберете, когато започнете да работите с CSS и трябва да насочите конкретни елементи, за да приложите визуални стилове.Селектори на потомци на CSS
Селектор на CSS потомци се отнася за елементите, които са в друг елемент (или по-точно посочен, елемент, който е потомък на друг елемент). Например, неорганизиран списък има маркер с етикети като потомци. За пример, използвайте следния HTML:
- това е връзка li> ul>
Таговете 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, голям.
- и внука на
- ще бъде детето на този елемент, а ще бъде детето на