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

Question

$(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背景和重复y。

不仅是最后一个孩子

我想要的是改变#container background image和no-repeat

的最后一个孩子

我的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，这是该元素所在内容的最后一个孩子，不 <的最后一个 < / em> #container。

   另一方面，

   #container > :last-child指的是#container元素的最后一个子元素。

2. 为了将两者背景图片和设置为同一行中的重复值，您需要使用简写background CSS属性。相反，如果你不想使用速记，你可以这样做：

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