与我的最后一个孩子选择器有任何错误？

Question

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

上面的代码没有工作，没有什么happend

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

以上代码的工作，但它改变所有的#container的背景和重复-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> 

Answer 1

你想这样的：

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

1. #container:last-child意味着你正在寻找#container这是最后一个子无论是元素坐镇内线，不最后一个孩子的#container。

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

2. 为了设置都背景图像和在同一条线上重复值，则需要使用简写background CSS属性。相反，如果你不想使用速记你可以这样做，而不是：

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