Блог

У меня есть элементы списка, которые индексируются с помощью css :before с :nth-of-type помощью …

 #list .item:nth-of-type(1):before{content:"1";}
#list .item:nth-of-type(2):before{content:"2";}
  

Проблема в том, что я использую дополнение для плавной прокрутки, которое будет вставлять дополнительные разделы в область прокрутки для достижения эффекта «упругих краев». Вставленные разделы не относятся к классу .item , но вставка все равно испортит индексацию css.

Это вызывает недоумение, поскольку я не понимаю, почему :nth-of-type должны заботиться об этих divs, но в результате индекс уменьшается на количество вставляемых divs (2), но вставленные divs не имеют :before назначенного им содержимого — так что, похоже, мне нужно «обновить» или что-то в этом роде.

Тестирование в Chrome.

Скрипка

Проблема в том, как nth-of-type работает, это работает должным образом только для типов (tag), а не для классов. Поэтому, когда вы используете это:

 #list .item:nth-of-type(1):before{content:"1";}
  

Фактически проверяется, есть ли у первого дочернего элемента class item , если есть, вставьте :before , в противном случае это ничего не делает, то же самое для других правил. Итак, когда вы используете этот код:

 $('#outer').prepend('<div/><div>');
  

на самом деле он вставляет 2 divs (не 1 div), это потому, что вы можете неправильно ввести теги, это может быть <div></div> (не <div/><div> ). Таким образом, HTML-код становится:

 <div id="outer">
  <div></div>
  <div></div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
  

Поскольку первые 2 divs не имеют class item , первые 2 правила игнорируются, начиная с третьего правила, мы имеем:

 #list .item:nth-of-type(3):before{content:"c";}
  

с этого момента правила работают, но они применяются с третьего раздела, следовательно, вы получаете результат:

 c 1
d 2
...
6 h
7
8
  

Последние 2 элемента 7 и 8 не :before вставлены, потому что для них нет никакого правила, нацеленного на них.

Если вы хотите просто получить нужный вам результат, вы можете попробовать использовать CSS counter следующим образом:

 #outer{
  height:80px;
  overflow-y:scroll;
  width:200px;
  border:1px solid red;
  /* add this */
  counter-reset:alpha;
}
#outer .item {
  counter-increment:alpha;
}
#outer .item:before{
  content:counter(alpha,lower-alpha);
}
  

ДЕМОНСТРАЦИЯ