如何访问`<div> `标签内的`<p> `标签？ </p></div><div id="text_translate"><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $("p div").click(function() { $(this).css({ "color": "#F00", "font": "bold 20px verdana", "background-color": "#0FF" }); });</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;p&gt;Hello&lt;div&gt; World!&lt;/div&gt;&lt;/p&gt;</pre></div></div><p></p><p> 当我单击“世界”文本时，什么也没有发生，当我检查元素时，它说：</p><pre class="lang-html prettyprint-override"> &lt;p&gt;Hello&lt;/p&gt; &lt;div&gt; World&lt;/div&gt; &lt;p&gt;&lt;/p&gt;</pre><p> 注意那些&lt;p&gt;标签。 怎么会这样？</p></div>

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>

当我单击“世界”文本时，什么也没有发生，当我检查元素时，它说：

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

注意那些<p>标签。 怎么会这样？

Answer 1

浏览器将<div>从<p>中踢出，因为它不是一个有效的位置，所以你不能在那里 select 它。

浏览器经常会尝试对无效的 HTML 进行更正，但结果不一定是可预测的，因此您需要改用有效的 HTML。

---

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

“P元素代表一个段落。它不能包含块级元素（包括P本身）。”

Answer 2

那很有意思。 问题是您的浏览器工作正常，我讨厌这种情况发生。 P是一个内嵌标签，而DIV是一个块标签（也就是说，它代表屏幕的一个矩形区域，而不是像内嵌标签那样可能不规则的文本部分），并且有一个规则，你不能将块标签放在内联标签内，这就是您的浏览器解决它的方式。

编辑：我注意到@magicmike 提出了一个很好的解决方案：

<p>Hello<span> World!</span></p>

Answer 3

浏览器不会尊重您在p中放置div的位置。 将其更改为span 。 这是一个工作的 Fiddle 。

Answer 4

div出现在p中是无效的。 这就是为什么 Firefox 重新排列了您的 [损坏的] HTML，您可以通过 Firebug 看到它的“固定”结果。 请改用span 。

另外，不要忘记将此事件处理程序设置放在 onLoad 处理程序中，因为当您的脚本最初运行时，您的p和span不一定存在：

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

现场演示。