與我的最後一個孩子選擇器有任何錯誤？

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" 
       });