Ошибка новичков в селекторе потомков
Посмотрите на следующий селектор:
p.eee {
color: red;
}
Вы уже должны знать, что такой селектор выберет абзацы с классом eee. Например, вот эти:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Посмотрите теперь вот на этот селектор:
p .eee {
color: green;
}
Это селектор отличается от предыдущего тем, что у него между именем тега и именем класса стоит пробел. Этот пробел представляет собой селектор потомков. То есть в данном случае мы выбираем все элементы с классом eee, находящиеся внутри абзацев. Например, этот селектор выберет следующие спены:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Результат выполнения кода:
Итак, еще раз: p.eee - такой селектор выбирает абзацы с классом eee. А вот если я сделаю так: p .eee, то выберу все элементы с классом eee, находящиеся внутри абзацев. Прочувствуйте эту разницу.
№1⊗jsPmSMMA
Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:
p.bbb {
color: red;
}
Ответ: p.bbb {
color: red;
}
p.bbb {
color: red;
}
/* p -> bbb (p для bbb непосредственный родитель)*/
<p>
<p class="bbb">css применим <h2 class="bbb">но не здесь</h2></p>
</p>