2

Недавно начал изучать HTML + CSS и столкнулся с проблеммой, проходя моменты с дочерними селекторами. Есть простой код:

<div>
<p>Известно, что пустыня обладает неправильной формой, которую
принимаем прямоугольной. Это достигается одним из двух способов —
<i>включением частей</i>, выходящих за пределы области пустыни
или их <i>отбрасыванием</i></p>
</div>
<p>
<h1>Текст1<h2>Текст2</h2></h1>
</p>

Стили такие:

p > h1{
    color: red;
}

h1 > h2{
    color: blue;
}

Ни первый стиль, ни второй не работает вообще. Я не знаю почему так происходит.

1
  • Заголовки h не вкладываются один в другой. Также нет необходимости вкладывать их в параграфы p. Необходимо соблюдать иерархию тегов.
    – user256824
    26 апр 2019 в 20:26

2 ответа 2

5

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

то есть

Параграф (абзац) - это блоковый (перевод?) элемент, он автоматически закрывается, если другой блоковый элемент начинается до того, как встретился закрывающий </p> тэг.

Таким образом, в DOM-дереве страницы нет элементов h1 внутри элементов p. То же самое - для элементов h2 внутри элементов h1.


Про тег <p> я понял, но не понял про h1>h2

h1 и h2 - это тоже блоковые элементы, один не может быть внутри другого. Даже если Вы напишете разметку html как в вопросе, браузер все равно создаст невложенные элементы h1 и h2.

<h1>Текст1<h2>Текст2</h2></h1>

введите сюда описание изображения

7
  • Про тег <p> я понял, но не понял про h1>h2 26 апр 2019 в 20:47
  • @СергейТерпеливый А теперь?
    – user176262
    26 апр 2019 в 20:52
  • Да, но просто div тоже блочные, но ведь можно же писать <div><h1>Пример</h1><div></div></div> 26 апр 2019 в 21:00
  • И стиль div > div будет работать 26 апр 2019 в 21:05
  • @Igor плюсанул, Игорь 26 апр 2019 в 21:12
1

div>h1 {
  color: red;
}

div>h2 {
  color: blue;
}

div i {
  color: green;
}
<div>
  <p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов —
    <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i></p>
</div>
<div>
  <h1>Текст1</h1>
  <h2>Текст2</h2>
</div>

Знак > ставить необязательно, достаточно пробела.

Если у тебя стоит цель из заголовков построить визуально предложение или что-то вроде этого, то:

div.zagolovki, h1, h2 {
    display: inline-block;
}
div.zagolovki h1 {
    margin-right: 5px;
}
<div class="zagolovki"><h1>Текст1</h1><h2>Текст2</h2></div>

8
  • Про h1 я понял, их нельзя вкладывать потому что они блочные, но <div><h1>Пример</h1><div></div></div> ведь работает и он тоже блочный. 26 апр 2019 в 21:35
  • @Сергей Терпеливый они автоматически переносятся в html-коде. 26 апр 2019 в 21:39
  • Не понял. Что значит автоматически переносятся? 26 апр 2019 в 21:59
  • @Сергей Терпеливый вот твой код: <h1>Текст1<h2>Текст2</h2></h1>. Впиши его например в обычную html-страницу, и посмотри как в результате выводятся тэги. Да и визуально сразу будет заметно, что вначале h1 сверху, и h2 снизу. Чего тут непонятного? если ты хочешь текст внутри текста сделать, то сделай это при помощи div или span например. Какую ты цель себе ставишь? 26 апр 2019 в 22:06
  • Моя цель понять следующее: выше мне писали, что при записи <h1><h2></h2></h1> не выйдет применить подобный стиль h1>h2 потому что они блочные, но если писать <div><div></div></div> то можно сделать div > div{color: red;} и все будет работать. Почему во втором случае все работает? Ведь div блочный как и h1. Он исключение? 26 апр 2019 в 22:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.