无类div的插入会混淆css .class：nth-​​of-type（n）：在索引之前

Question

我有使用:before css :nth-of-type编制索引的列表项...

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

问题是我使用的是一个平滑的滚动条插件，它会在可滚动区域中插入额外的div，以实现其“bouncy-edge＆＃34;效果。插入的div不是类.item，但是插入会使css索引陷入困境。

这是令人费解的，因为我不明白为什么:nth-of-type应该关心那些div，但结果是索引被它插入的div数量（2）关闭但是插入的div没有{{ 1}}分配给他们的内容 - 所以看起来我需要一个＆＃39;刷新＆＃39;或者其他的东西。

在Chrome上进行测试。

Fiddle

Answer 1

问题是nth-of-type如何工作，它只适用于类型（标记），而不适用于类。所以当你使用它时：

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

它实际上检查第一个孩子是否有item类，如果是，则插入:before，否则它什么都不做，对其他规则也是如此。所以当你使用这段代码时：

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

它实际上插入 2 div （不是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个div没有类item，所以前两个规则被忽略，从第三个规则开始，我们有：

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

从现在起规则起作用但它适用于第三个div，因此你得到了结果：

c 1
d 2
...
6 h
7
8

最后两项7和8没有插入:before，因为没有任何针对它们的规则。

如果您想生成所需的正确结果，可以尝试使用这样的CSS计数器：

#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);
}

Demo