css - 每第 n 行的行号与 CSS 计数器？

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 类并关闭显示属性或可见性属性，例如

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

或

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 有关不允许修改的选择器...(如果它找到一个 child ，它会被计入它的目的...)

---

更新

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

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

为了保持 html 有效，您需要使用 menu元素，因为这是唯一允许同时使用 li 的元素和 ol作为 child ......(你当然可以使用完全不同的元素......只要确保计数元素与非计数元素不同)

所以只是指望

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/