Есть ли разница в использовании &: first-of-type в сравнении с: first-of-type в scss

Question

Есть ли какая-либо разница в использовании &:first-of-type, вложенных в класс Apple, по сравнению с :first-of-type, вложенных в класс All-Fruit. Потому что они оба дают одинаковые результаты, превращая слово «яблоко» в красный цвет. Как узнать, когда их использовать?

HTML:

<div class="all-fruits">
    <p class="fruit apple">Apple</p>
    <p class="fruit strawberries">Strawberries</p>
</div>

CSS:

$apple: red;



.all-fruits{ 
  margin-left: 200px;
  margin-top: 100px;
  .apple {
    color: $apple;
  }
  :first-of-type {
    font-size: 100px;
  }
}

против

.all-fruits{
  margin-left: 200px;
  margin-top: 100px;
  .apple {
    color: $apple;
     &:first-of-type {
       font-size: 100px;
     }
  }
}

Answer 1

Есть ли разница в использовании &:first-of-type ... против только :first-of-type

Да, есть разница между этими двумя, и в некоторых случаях она может быть очень большой. Посмотрите на CSS, сгенерированный из ваших примеров SASS:

/* :first-of-type example */

.all-fruits :first-of-type {
  font-size: 100px;
}

/* &:first-of-type example */

.all-fruits .apple:first-of-type {
  font-size: 100px;
}

В первом примере вы говорите "установите font-size равным 100px для любого элемента, который происходит от элемента .all-fruits, предполагая, что это первый элемент его типа". Поэтому, если вы когда-либо добавите какой-либо элемент, не являющийся абзацем, к вашему .all-fruits div, он также будет иметь размер шрифта 100 пикселей. Рассмотрим следующий пример:

<div class="all-fruits">
  <p class="fruit apple">Apple</p>
  <p class="fruit strawberries">Strawberries</p>
  <span>Yummy!</span>
</div>

При .all-fruits :first-of-type диапазон также будет иметь размер шрифта 100px, в то время как .all-fruits .apple:first-of-type будет гарантировать, что только те элементы, которые являются первыми по своему типу И имеют класс .apple, получают шрифты 100px.

Потому что они оба дают одинаковые результаты ... Как узнать, когда их использовать?

Обе, дающие один и тот же результат в каком-то конкретном случае, не являются оправданием для предположения, что оба одинаково хороши для работы. Я полагаю, что следующий CSS даст вам тот же результат с вашим текущим HTML:

.all-fruits {
  margin-left: 200px;
  margin-top: 100px;
}
.all-fruits .apple {
  color: red;
}
*:not(:last-of-type) {
  font-size: 100px;
}

Но это не значит, что мой селектор :not вообще хорош. Фактически, было бы ужасным решением использовать этот селектор.

Хотя трудно предсказать все возможные дополнения к текущему HTML и написать 100% -ный CSS, ориентированный на будущее, чаще всего целесообразно применять стили с помощью классов вместо очень универсальных или универсальных селекторов.

В вашем случае .apple:first-of-type кажется лучшим выбором, чем просто :first-of-type. Если я немного больше расскажу о ваших требованиях, я бы также подумал об использовании .fruit:first-of-type, поскольку это увеличило бы размер шрифта любого фрукта, который стоит первым в списке, а не только яблок.