CSS * Selector Странное обращение

Question

Я провожу некоторые исследования браузеров и их отношение к кодам CSS и HTML, проверяю это, вижу странный результат и не могу понять.это исследование.так что это не настоящий код.

Я замечаю проблему при использовании селектора CSS *.Позвольте мне объяснить:

См. Пример ниже:

p * { color:red; }

Это означает, что все теги внутри элемента ap должны быть красного цвета.Вот несколько примеров:

<p>
<div>
text <!-- Must be red but not !-->
</div>
<p>
text <!-- Must be red but not !-->
</p>
<span>
text <!-- Must be red but not !-->
</span>
</p>

У этой проблемы есть причины?Логические причины?

Answer 1

Валидатор W3 XHTML предложит вам использовать вложенные теги p.Подумайте об этом на короткое время: «абзац внутри абзаца».Синтаксически, div внутри p недопустимо во всех стандартах HTML.Более того, при использовании соответствующего анализатора HTML невозможно разместить элемент div внутри p в DOM, поскольку открывающий тег div автоматически закроет элемент p.Вы можете увидеть более подробную информацию здесь

Однако вы можете использовать встроенные теги, такие как span, если хотите стилизовать элементы в абзаце.

Answer 2

Я предполагаю, что это из-за плохой разметки.Браузеры имеют тенденцию закрывать определенные теги.У вас есть тег AP, оборачивающий другой тег p.Поэтому браузер может закрыть его для вас и запустить новый, который, возможно, испортит ваш CSS-селектор.

<p><div>should be red?</div></p>
<p>just text won't be red</p>