CSS nth-child，穿越树枝

Question

我有一个包含类别标题的列表，以及嵌套在这些标题中的项目。如果我做

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

每个类别中的第一项都以1为前缀。这有些出乎意料。我想我正在寻找一个nth-item()插件。

我有什么选择我不控制html，它动态变化，我不想用jQuery监视它。我希望有一个CSS解决方案。

Link to Fiddle

Answer 1

您也可以使用CSS counter

http://jsfiddle.net/6tN5U/

body {
    counter-reset: item;
}

.item{
    margin-left:20px;
}
#items .item:before{counter-increment: item; content: counter(item) " ";}