Это в значительной степени вопрос семантики.
Как правило, вы используете :first-child/:first-of-type и :last-child/:last-of-type, когда вы заинтересованы в стилизации первого и последнего элемента (только или отличным от других n -ных элементов надконкурирующих :nth-of-type() правил), и вы хотите, чтобы эти правила применялись к первому и последнему, даже если число элементов может изменяться.
Даже если вы заранее знаете количество элементов, и даже если это числоникогда не изменится, :nth-of-type(X), где X - количество элементов, не сразу дает понять, что оно ссылается на «какой бы элемент не был последним», а не на какой-то произвольный X-й элемент:
div:nth-of-type(even) { background-color: yellow; }
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(12) { background-color: green; }
This,конечно, это очень субъективно - вы можете знать свой макет достаточно близко, чтобы знать, что всегда будет ровно X элементов, поэтому приведенный выше пример всегда будет нацелен на первый и последний, и вы можете быть единственным разработчиком, который когда-либо видел ваш код итак что это не будет иметь значения для вас.Вот почему я сказал, что это вопрос семантики.(Вы можете обойтись без использования :nth-last-of-type(1) ..., но тогда вы также можете сэкономить клавиши и использовать вместо него :last-of-type.)
Единственная ситуация, в которой :nth-of-type(X) предпочтительнее, это есливы планируете расширить это с помощью дополнительных правил :nth-of-type(), каждый из которых определяет конкретный элемент по-другому, чем первые два:
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(2) { background-color: green; }
/* Added */
div:nth-of-type(3) { background-color: blue; }
Другими словами, когда вам нужно правило, которое применяется ко второму элементу (""last "), чтобы продолжить применение ко второму элементу, даже когда третий элемент добавлен - и вы не хотите, чтобы это правило затем применялось к третьему (новому" последнему ") элементу, когда это происходит - используйте :nth-of-type(2), дажеесли, например, только 2 элемента появляются в макете по умолчанию .На данный момент вы больше не имеете дело с первой / последней семантикой, но вы (и всегда) имели дело с n-й семантикой.
В такой ситуации может показаться ненужным использовать :nth-of-type(1) over :first-of-type, поскольку первый элемент будет всегда первым, независимо от того, сколько элементов вы добавляете или удаляете из своего макета.Какой из них вы используете в этом случае, действительно зависит от личных предпочтений - например, я бы предпочел :nth-of-type(1) для соответствия другим правилам, чтобы он не выглядел как нечетный:
div:first-of-type { background-color: red; } /* Looks out of place... */
div:nth-of-type(2) { background-color: green; } /* ... when every other element... */
div:nth-of-type(3) { background-color: blue; } /* ... is numbered */
Кроме того, как насчет необычного сценария, когда кодер имеет контроль только над таблицей стилей, а HTML крайне маловероятен, но технически подвержен изменению?
Это не так уж необычно на самом деле.Если HTML вряд ли изменится, то, скорее всего, макет его не поддерживает и поэтому не будет работать правильно, если он изменится .Используете ли вы first / last или nth, не будет иметь большого значения, поэтому мой совет по выбору на основе семантики остается.
Ради полноты, есть один дополнительный улов, когдаречь идет о :first-child: в отличие от :last-child, :only-child, :nth-child() и всех вариантов на основе типов (:*-of-type), :first-child была введена в CSS2 и поэтому несколькоочень старые браузеры поддерживают это только без поддержки остальных.
В наше время вам, вероятно, не нужно об этом беспокоиться, но если вы хотели, чтобы ваш макет изящноДля более старых браузеров можно использовать :nth-child(1), чтобы он не работал в неподдерживаемых браузерах вместе со всеми другими правилами :nth-child(), вместо того, чтобы стилизовать первый элемент, а остальные - нет, что в зависимости от вашего макета может выглядеть уродливов лучшем случае или вызвать неблагоприятные проблемы с макетом в худшем случае.