есть какая-нибудь ошибка с моим последним детским селектором?

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 и не повторять

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