Селектор потомков CSS

Question

Для этого вида селектора "p span" выберет все элементы-потомки p.

Но почему следующий код не работает?

p span { font-weight:bold;color:blue }

<p>
    <p>
        <span>TEXT 1</span>
    </p>
    <p>
        <span>TEXT 2</span>
    </p>
    <span>TEXT 3</span>
    <span>TEXT 4</span>
    <span>TEXT 5</span>
</p>

TEXT 3 - 5 являются потомками элемента первого уровня p. Но почему они не отображаются жирным и синим цветом? (Текст 1 - 2 показывает правильный стиль)

Answer 1

<p> - это специальный тег в HTML. Вы не можете вставлять абзацы в другой абзац, а открытие двух тегов P неявно закрывает предыдущий. Ваш код фактически интерпретируется как:

<p></p>   <---closed by having opened the next <p>
<p><span>TEXT1</span></p>
<p><span>TEXT2</span></p>
<span>3</span>
etc...

Таким образом, 3,4,5 пролета вообще НЕ находятся внутри <p>.

Answer 2

Из спецификации - http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Элемент <p> представляет абзац.Он не может содержать элементы уровня блока (включая сам <p>).

Попробуйте преобразовать элементы <p> в <div> элементы.

p span { font-weight:bold;color:blue }

<div>
    <div>
        <span>TEXT 1</span>
    </div>
    <div>
        <span>TEXT 2</span>
    </div>
    <span>TEXT 3</span>
    <span>TEXT 4</span>
    <span>TEXT 5</span>
</div>