Question

我不得不删除某些引用链接（斜体），因为我还没有足够的声誉，但可能会在以后更换它们。

我创建了一个jQuery插件，用于显示诗歌和戏剧的增量行号;诗的线条表示为有序列表（ol.verse）的子元素。启用javascript后，插件会根据最少的内联列表值每隔n个间隔生成一次行号。然后可以通过DOM操纵这些数字。当禁用JS时，每五行的数字列表标记作为后备行号启动。

我现在想知道是否有可能将插入的诗作为由CSS计数器提供支持的列表降级。 IE 6-7获得带有数字尾随周期的普通有序列表，但是高级浏览器应该获得计数器或插件生成的数字。这是捕获。 CSS计数器规则应该能够适应行编号和诗歌列表的子索引不同步的情况。我在格式化计数器和skipping children上看过很多帖子，以及语义格式化诗歌的正确和错误方式以及typographically （ W3C proposals 推荐段落和预标签最多是有问题的;然而，关于使用计数器来增加行号的问题，我已经空了，所以我正在分享我自己的努力以寻求解决方案，并希望你们能帮助我找到更好的解决方案。

基本规则我一直在尝试取得有限的成功：

ol.verse { counter-reset: line 0;
ol.verse li {
   display: block;       
}

ol.verse li:before {
   counter-increment: line;
   content: counter(line) " ";
}

/* hide lines, or more precisely, children, that are not a multiple of 5 */

ol.verse li:not(:nth-child(5n)):before {
   visibility: hidden;
}

从this fiddle可以看出，这些规则每隔5行显示一次数字，因为每个列表中的孩子都被计为诗的一行，并且如果从第1,6行开始，那么这个规则很长， 11,16等（即计数器复位为0或5的倍数）。对于那些想要为一些更简单的任务（例如一篇博客文章的简单诗）增加行号而言，最后一条规则可能会引起人们的兴趣，但这些条件对我们的需求来说过于严格（TEI结构的关键版本的存储库）诗歌/戏剧在线）。

问题1：当我有一个或多个作品的摘录或分段的反重置是默认增量的非倍数时，我必须通过id引用摘录并抵消隐藏剩下的每个id'd ol.verse的规则。例如，从第43行开始的摘录需要将计数器重置调整为42，并将隐藏规则的第n个子参数调整为5n + 3（因为42％5 = 3）。突然间，计数器变得不如手工编号列表值那么吸引人了。这至少比......好。

问题2：让浏览器取消某些行，例如可能嵌入诗中的副标题或舞台方向。对于这些行，我尝试附加一个nocount类并关闭display属性或visibility属性，例如。

ol.verse li.nocount:before {
   display: none;     
}

OR

ol.verse li.nocount:before {
   visibility: hidden;
}

与规则隐藏线组合，这些线是增量的非倍数，既不会产生所需的结果。见this fiddle。第一个在正确的数字上触发错误的行编号;后者，对错误的编号进行正确编号。有没有办法编写CSS计数器规则，无论自动化行号是否与正确的子索引相对应，这些规则都有效？也许还有一些CSS选择器的组合可以完成这项工作吗？

Answer 1

修复计数不是问题，因为您可以将counter-increment: line 0;用于要排除的规则（，如果它们适用于与+1增量相同的元素）特异性或!important。

（如果您将规则应用于:before伪元素，但希望根据li排除，则可以应用counter-increment:line -1;

http://jsfiddle.net/gaby/qpsGv/3/

演示

要在右边显示它，虽然这是另一个问题，因为它与nth-child选择器有关，不允许修改...（如果它找到一个孩子它会被计算为它的目的...... ）

<强>更新

我不知道你改变实际的html有多大的灵活性，但我能看到的唯一解决方案是将你想要的元素包装在另一个元素中。

这样您就可以使用nth-of-type代替nth-child，这样您确实只能显示5的倍数。

为了保持html的有效性，您需要使用menu元素，因为这是唯一允许li和ol作为子元素的元素。（你可以使用完全不同的元素..只要确保计数元素与不计数元素不同）

所以只依靠

menu.verse > li { counter-increment: line 1;}

并显示在

上

menu.verse > li:nth-of-type(5n):before {
    content: counter(line);
    width: 2em;
    display: block;
    float: left;
    margin-left: -2em;  
}

当html是

时

<menu class="verse">
 <li>countable</li>
 <ol><li>non countable</li></ol>
 <li> countable</li>
</menu>

应该有用..（ <ol><li>可以成为具有适当样式的div .. ）

演示 http://jsfiddle.net/gaby/qpsGv/7/

Answer 2

对于问题2，如果你的小提琴中的class="fallback"留在那里，而不仅仅是问题解释的一部分，你可以使用它作为解决方案：免除nth-child（5n）如果行数应该显示，则使用后备作为指标。

请参阅updated jsFiddle 我在那里插入了一条不属于诗的一行，看看它是否有效，它确实：你可以删除该行，其余的将保持同步。

每个第n行使用CSS计数器的行号？

2 个答案: