Почему при выборе непосредственно дочернего элемента абзац игнорируется? - HTML, CSS

[aqua.77]

Почему элемент <li> внутри элемента <p> тоже входит в выборку селектора ul > li ?
он же не непосредственно дочерний https://jsfiddle.net/5unz8ta4/

[wwt]

Смотрите отладчик и видите как браузер разобрал ваш код:

<ul>
  <li>1</li>
  <li>2</li>
  <div>
    <li>555</li>
  </div>
  <p>
    </p><li>555</li>
  <p></p>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

А дальше внимательно читаем описания элементов UL и P

UL

Цитата

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

P

Цитата

Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Кроме этого элемент P не может содержать внутри себя другие блочные элементы, это написано вот тут https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Правило что каждый элемент списка должен начинаться на LI нарушено, но браузер постарался исправить этот момент и отобразить страницу как надо. А вот с P возникла проблема, ибо, и читаем что же такое блочный элемент http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy

И видим там строчки:

Цитата

Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Отсюда делаем вывод что при добавлении внутрь P элемента LI он разрывает параграф ибо LI по умолчанию имеет свойство display: list-item, а закрывающий тег </p> образует новый элемент параграфа.

Читайте документацию внимательнее, и С Новым Годом! =)