javascript - 父后代 jquery 选择器中的奇怪错误

Question

我已阅读 tutorial about jquery selectors .

有人提到:

parent descendant - $("div p") - All <p> elements that are descendants of a <div> element

他们提供了一个 demo效果很好:

但我仍然无法弄清楚为什么这行不通:

<p class="ee">
    <h4><span> The backgroud color don't changed</span></h4>
</p>
<script>
    $(".ee span").css("background-color","yellow");
</script>

jsfiddle DEMO

Answer 1

你的标记是错误的

<p class="ee">
     <h4><span> The backgroud color don't changed</span></h4>
</p>

你不能有<h4>标签内侧 p标签

所以 browser render这作为

<p class="ee"></p>
     <h4><span> The backgroud color don't changed</span></h4>
<p></p>

所以你下面的选择器不起作用。因为没有 span内部类ee

$(".ee span").css("background-color","yellow");

---

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

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