": первый тип" работает, "последний тип" не работает

Question

У меня работает следующее «: first-of-type», но «: last-of-type» не будет.

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="shadow"></div>
</div>

.wrapper .item:first-of-type {
    background-color: blue;
}
.wrapper .item:last-of-type {
    background-color: red;
}

Даже при подсчете количества элементов с помощью jQuery,Я получаю следующие результаты:

$('.wrapper .item').size(); // equals 3
$('.wrapper .item:first-of-type').size(); // equals 1
$('.wrapper .item:last-of-type').size(); // equals 0

Заранее спасибо.

Answer 1

Они оба отлично работают для меня, но вы должны знать, что jQuery не поддерживает first-of-type и last-of-type.

Они работают только потому, что querySelectorAllподдерживает их.Так что браузеры, которые не поддерживают qSA, сломаются.

---

Кстати, ваш 0 результат связан с тем, что first/last-of-type учитывает тип элемента, даже если вы указали толькоучебный класс.Мое тестирование было немного другим.

Answer 2

Почему бы вам не использовать first() и last()? Первый выбирает первый элемент в соответствующем наборе, а последний - последний элемент.

Здесь - отчет об ошибках, относящихся к :first и :last-of-type.

Answer 3

jQuery не поддерживает :last-of-type - http://selectivizr.com/ - посмотрите таблицу сравнения библиотек.Возможно, вы захотите посмотреть на этот плагин, чтобы помочь вам - https://github.com/keithclark/JQuery-Extended-Selectors