пытается получить последний ребенок в CSS, но он не работает

Question

мне было любопытно, почему:

$("div.title").last(); 

не возвращает тот же элемент, как код CSS:

$("div.title:nth-child(0)") или $("div.title:last-child")

Я пытаюсь ссылаться на него в css, но кажется, что он, похоже, не делает этого.

HTML, выглядит следующим образом:

<div> 
    <div class="title"></div> 
    <div></div> 
    <div class="title"></div> 
    <div></div> 
</div> 

Answer 1

:last-child относится только к последнему ребенку родителя (по аналогии с JQuery .last())

Однако CSS :last-of-type выбирает последнее вхождение шаблона, который, вероятно, что вы стремились сделать:

div.title:last-of-type будет выбрать тот же элемент, что Jquery $("div.title").last();

(примечание: оба эти селекторы не работают по умолчанию в IE8 или ниже)

Answer 2

:last-child в CSS будет только выбрать элемент, если он является последним ребенком его родители, независимо от того элемента, класса или любого другого селектора.

В jQuery .last() будет фактически фильтроваться на коллекции элементов, которые вы получили в вашем селекторе jQuery.

Answer 3

Причина в том, что в CSS :last-child относится к последнему ребенку родителя. Так ..

<div> 
    <div class="title"></div> 
    <div></div> 
    <div class="title"></div> 
    <div></div> 
</div> 

div.title:last-child ничего не выбрать в качестве последнего ребенка родителя div.title «s является div.

:nth-child(n) работает с той же логикой. Здесь n относится к индексу каждого дочернего элемента родителя, начинающему отсчет с 1.

last() jQuery отличается. Он выбирает последнее вхождение селектора jQuery, который был предоставлен. Таким образом, $("div.title").last(); выберет последний div.title во всем коде.