nth-of-type选择错误的元素

Question

有人可以在这里向我解释为什么我的li.prod显示的类上的伪选择器3n + 4选择的不是第4，第7，第10，第13，第16，第19 ......等等，但第4，如下面的编码器中所示，当有额外的li-s插入折叠时，如图6,11,13和16所示。

如果你看一下这笔，我不擅长解释这么好。 :)

http://codepen.io/anon/pen/XbOEMY

li.prod-shown:nth-of-type(3n+4) {  
    background: tomato;
    }

提前致谢！

Answer 1

Nth-of-type选择nth element with a particular tag name，而不选择特定的类。因此，类quickview的元素也会被选中，这会使你的编号失效。