javascript - 如何访问 `` 标签内的 `` 标签？

Question

$("p div").click(function() {
  $(this).css({
    "color": "#F00",
    "font": "bold 20px verdana",
    "background-color": "#0FF"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Hello<div> World!</div></p>

当我单击“World”文本时没有任何反应，当我检查元素时，它显示:

<p>Hello</p>
<div> World</div>
<p></p>

注意那些<p>标签。怎么会发生这种事？

Answer 1

浏览器正在踢 <div>出<p>因为它不是有效的展示位置，因此您无法在那里选择它。

浏览器通常会尝试纠正无效的 HTML，但结果不一定是可预测的，因此您需要使用有效的 HTML。

<小时/>

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

"The P element represents a paragraph. It cannot contain block-level elements (including P itself)."