如何访问`<p>`标签内的`<div>`标签? [英] How to access a `<div>` tag inside a `<p>` tag?

问题描述

$("p div").click(function() {$(this).css({"颜色": "#F00","font": "粗体 20px verdana",背景颜色":#0FF"});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>你好<div>世界！</div></p>

当我点击世界"文本时没有任何反应，当我检查元素时，它说:

<p>Hello</p><div>世界

<p></p>

注意那些

标签.怎么会这样?

解决方案

浏览器将

从

中踢出，因为它不是'不是一个有效的展示位置，因此您将无法在那里选择它.

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

<小时>

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

<块引用>

P 元素代表一个段落.它不能包含块级元素(包括 P 本身)."

$("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>

Nothing happens when I click the "World" text, and when I inspect the elements, it says:

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

Notice those <p> tags. How could that happen?

解决方案

The browser is kicking the <div> out of the <p> because it isn't a valid placement, so you won't be able to select it there.

Browsers often do try to make corrections for invalid HTML, but the result isn't necessarily predictable, so you'll need to use valid HTML instead.

---

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)."

这篇关于如何访问`&lt;p&gt;`标签内的`&lt;div&gt;`标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！