jQuery的":last-child"选择器不会将<body>视为Jsbin上的父级？

Question

我有这个简单的HTML:

<body>
  <a>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </a>
</body>

div是孩子们的<a>.

来自jQuery:

:last-child Selector - 选择作为其父级的最后一个子元素的所有元素.

 $("div:last-child" ).css('background-color','red')

将产量:

在此输入图像描述

好吧,让我们删除<a>,这divs将是直接的孩子Body

<body>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</body>

结果:没有画任何东西.(http://jsbin.com/kamepu/4)

题

那些divs是孩子的 Body.为什么它不起作用？

NB我知道我可以使用last.但这不是我的问题.

Answer 1

如果查看DOM,JS Bin会script在结束</body>标记之前插入一些元素,这会阻止任何divs匹配div:last-child.请记住,虽然script元素(通常)不会被渲染,但它们确实存在于DOM中,就像任何其他HTML元素一样,因此会影响选择器匹配.

最后div,其实是最后的类型,即使它不是非常最后一个孩子body; 您可以通过切换到:last-of-type它来验证这一点,它将匹配.

正如评论中所提到的,Stack Snippets也是这样做的:

div:last-child { text-decoration: underline; }
div:last-of-type { color: red; }

<body>
  <div>Red but no underline</div>
</body>

好吧,你快一分钟.尽快点击你的代表...叹息.另外:欢迎回来!奇怪的是,在过去的几个月中,CSS,HTML和JavaScript问题都没有被权威地回答...... (2认同)