我的最后一个孩子选择器有什么错误吗？答案

【问题标题】：have any mistake with my last-child selector?我的最后一个孩子选择器有什么错误吗？
【发布时间】：2012-07-06 11:06:58
【问题描述】：

$(function(){
   $("#mainContainer #container:last-child").css("background-image","url('/images/content-title.png') no-repeat")
})

上面的代码不起作用，什么也没发生

$(function(){
   $("#mainContainer #container:last-child").css("background-image","url('/images/content-title.png')")
})

上面的代码可以工作，但是它改变了所有的#container 背景和repeat-y。

不仅仅是最后一个孩子

我想要的是更改#container 背景图像的最后一个子元素并且不重复

我的html

<div id="mainContainer">//width 930px margin 0 auto
  <div id="container">//height 500px test background repeat-y
    dynamic content here
  </div>
</div>

【问题讨论】：

您的动态内容是由 jQuery 生成的，还是由 PHP 或 ASP.NET 等服务器语言生成的？如果它是在服务器端生成的，我们可以看看它的样子吗？
没关系，我已经放弃了，哈哈...是由 php 生成的，我只是在页脚添加了 1 个 div。谢谢你回答我的问题

标签： javascript jquery css jquery-selectors

【解决方案1】：

你想要这个：

$("#mainContainer #container > :last-child")
    .css("background","url('/images/content-title.png') no-repeat");

#container:last-child 表示您正在寻找 #container，它是该元素所在的最后一个子元素，不是最后一个子元素 #container。

另一方面，#container > :last-child 指代作为 #container 元素的最后一个子元素的任何元素。

为了在同一行中设置both 背景图像和重复值，您需要使用简写的background CSS 属性。相反，如果您不想使用速记，则可以这样做：

$("#mainContainer #container > :last-child")
    .css({
         "background-image": "url('/images/content-title.png')", 
         "background-repeat": "no-repeat"
    });

【讨论】：