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')

将屈服：

enter image description here

好的，我们删除<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>元素，这会阻止任何div匹配div:last-child。请记住，尽管script元素（通常）没有呈现，但它们确实存在于DOM中，就像任何其他HTML元素一样，因此会影响选择器匹配。

最后div实际上是其最后一种类型，即使它不是body的最后一个孩子;你可以通过切换到:last-of-type来验证这一点，它会匹配。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

:last-child returs true是最后一个这种类型的孩子（在这种情况下是div）。

JSBin链接页面底部的script（</body>之前），因此:last-child仅适用于script元素。

解决方案是使用head或document.ready之后将脚本移至</body>部分。