Неожиданное поведение из: п-го из-типа (п + 1)

Question

Я заядлый пользователь x-of-type семейства CSS псевдо-классов:

• :first-of-type
• :last-of-type
• :nth-of-type
• :nth-last-of-type

Я обычно довольно разбираюсь в обеспечении того, чтобы любая серия подобных элементы (элементы списка и т. д.) отображаются точно так, как я желаю.

В последний час, однако, я застрял на том, как добиться следующего результата с помощью одного объявления стиля:

• Пункт 1 имеет border-bottom
• Пункт 2 имеет border-bottom
• Пункт 3 имеет border-bottom
• Пункт 4 (последний пункт) не имеет border-bottom

я достиг того, что мне нужно, используя:

.item { 
border-bottom:6px solid rgb(227,227,227); 
} 

.item:last-of-type { 
border-bottom:none; 
} 

но для краткости, я бы до сих пор предпочитают, чтобы достичь того же результата с одной декларации.

Вопрос:

Почему не будет

.item:nth-of-type(n-1) { 
    border-bottom:6px solid rgb(227,227,227); 
    } 

или

.item:nth-last-of-type(n+1) { 
    border-bottom:6px solid rgb(227,227,227); 
    } 

работа?

Это потому, что n - это просто бесконечный список чисел, включая числа до и после количества целевых элементов на странице?

Если да, то как я могу объявить «Все, кроме последнего элемента» в одной декларации?

(А извинения заранее, если это что-то действительно очевидно, и я просто не заметил его ...)

---

... Добавлено

Вот HTML я работаю с:

<aside> 
<img src="" title="" alt="" /> 
<span class="something-else">Blah</span> 
<span class="item">Item Details</span> 

<img src="" title="" alt="" /> 
<span class="something-else">Blah</span> 
<span class="item">Item Details</span> 

<img src="" title="" alt="" /> 
<span class="something-else">Blah</span> 
<span class="item">Item Details</span> 

<img src="" title="" alt="" /> 
<span class="something-else">Blah</span> 
<span class="item">Item Details</span> 
</aside> 

Answer 1

Это потому, что n просто бесконечный список номеров, включая номера до и после ряда целевых элементов на странице?

Да, именно поэтому :nth-of-type(n-1), как представляется, соответствует каждому элементу: n отсчитывает бесконечное число раз. Таким образом, последний тип будет по-прежнему соответствовать, когда n равно 1 плюс общее количество дочерних элементов этого типа элемента. Другими словами, выражение n-b для любого b (или n+b для b <= 1) эквивалентно n (само по себе n-0), что является гарантированным совпадением.

:nth-last-of-type(n+1) близко, но причина, по которой не делать то, что вы хотите, потому что n начинает отсчет с нуля, поэтому, когда n равен нулю, n+1 соответствует последним типа.

Если да, то как я могу объявить «Все, кроме последнего пункта» в одном объявлении?

У вас есть два пути. То, что вы были близки, это :nth-last-of-type(n+2). Другой - намного яснее :not(:last-of-type).

Answer 2

Попробуйте этот селектор:

.item:not(:last-of-type) { 
    border-bottom:6px solid rgb(227,227,227); 
} 

Он выбирает все элементы с классом item, которые :not в :last-of-type.

Отметьте, что вы можете использовать :not() с любыми одиночный кусок селектора.

/* This is valid */ 
p:not(.classA):not(.classB):not(.classC) { 
    /* ... */ 
} 

/* This isn’t: */ 
p:not(.classA.classB.classC) { 
    /* ... */ 
}