如何訪問`<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'
        });
    });
});

現場演示。