Как я могу сделать последний <div> зеленым?
Я действительно новичок в HTML и CSS, и я только что изучал вложение, где у меня возникла проблема с одной из задач css для начинающих. Вот требования к задаче:
- сделать слово (название) красным.
- сделать слово (дочернее название) синим цветом.
- сделать слово (содержимое абзаца) зеленым.
- сделать слово (название раздела) тоже зеленым.
Я уже дал код HTML, и в соответствии с требованиями я НЕ ДОЛЖЕН вносить в него какие-либо изменения.
div div span {
color: red;
}
div span {
color: blue;
}
p {
color: green;
}<div class = "parent">
<div class = "child">This Is Child <span class = "title">Title</span></div>
<span class = "title">Child Title</span>
<p>Paragraph Content</p>
</div>
<div class = "title">Section Title</div>Пожалуйста, помогите с номером 4. Заранее большое спасибо.
:nth-last-child или :nth-last-of-type селектор
В предоставленном вами HTML есть классы, так почему бы вам не использовать их в CSS?
Ответы 2
Измените свой CSS на
div div span {
color: red;
}
div span {
color: blue;
}
p {
color: green;
}div {
color: green;
}
Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Можно принять к сведению этот CSS для всех требований.
> = дочерний селектор
~ = селектор братьев и сестер
, = запятая представляет стили для обоих элементов по отдельности
.parent>.child>span {
color: red;
}
.parent>.child~.title {
color: blue;
}
.parent>p,
.title {
color: green;
}<div class = "parent">
<div class = "child">This Is Child <span class = "title">Title</span></div>
<span class = "title">Child Title</span>
<p>Paragraph Content</p>
</div>
<div class = "title">Section Title</div>Спасибо за ваш ответ. Это действительно работает! Я просто не понимаю, почему последний (.title) работал, хотя есть много элементов с одним и тем же классом?!
@simokitkat Потому что я использовал дочерний селектор > для нацеливания на первый .title класс span, который является дочерним по отношению к .child. Я использовал родственный селектор ~ для диапазона, не вложенного в дочерний элемент. Это означает только элемент с классом .title. это родной брат .child получит синий цвет. - div с .title не ребенок для .parent и не sibling для child, поэтому он знает, о чем я говорю, просто написав .title. Во всяком случае, div с .title является братом .parent, поэтому вы можете использовать .parent~.title для таргетинга на последний div. Надеюсь, это было ясно.
Если хотите, я могу опубликовать тот же результат без использования имен классов, что может помочь вам лучше понять, как работают селекторы.
использовать последний дочерний псевдоселектор