11

我不得不删掉某些引用链接（斜体），因为我还没有足够的声誉，但也许以后可以替换它们。

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

我现在想知道是否有可能将插入的诗歌降级为由 CSS 计数器提供支持的列表。IE 6-7 提供带有数字尾随句点的普通有序列表，但高级浏览器应该获得计数器或插件生成的数字。这就是问题所在。CSS 计数器规则应该能够适应诗列表的行号和子索引不同步的情况。我看过很多关于格式化计数器和跳过孩子的帖子，以及在语义和排版上格式化诗歌的正确和错误方法（W3C 提案推荐段落和前置标签充其量是有问题的）；然而，在使用计数器来增加行号的问题上，我一无所获，所以我分享了我自己为解决方案所做的努力，希望你们能帮助我找到更好的解决方案。

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

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

正如您从这个小提琴中看到的那样，这些规则每第 5 行显示一个数字，只要每个列表子项都被计为诗歌的一行，并且只要段落从第 1、6、11、16 行等开始。 （即计数器复位为 0 或 5 的倍数）。最后一条规则可能对那些想要为一些更简单的任务（例如，一首简单的博客文章）增加行号的人感兴趣，但是这些条件对于我们的需求来说过于严格（TEI 结构的关键版本的存储库）诗歌/戏剧在线）。

问题 1：当我有一个或多个作品的多个摘录或分割，其计数器重置不是默认增量的倍数时，我必须按 id 引用摘录并将每个 id'd ol.verse 的隐藏规则偏移其余的。例如，从第 43 行开始的摘录需要将 counter-reset 调整为 42，并将隐藏规则的第 n 个子参数调整为 5n+3（因为 42 % 5 = 3）。突然之间，计数器变得不像手动编号列表值那样吸引人。这至少比......

问题 2：让浏览器不计算可能嵌入在诗歌中的某些行，例如副标题或舞台方向。对于这些行，我尝试附加一个 nocount 类并关闭显示属性或可见性属性，例如

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

或者

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

结合非增量的倍数的规则隐藏线，两者都没有给出期望的结果。看到这个小提琴。第一个在正确的数字上触发错误的行号；后者，对错误的正确编号。是否有任何方法可以编写 CSS 计数器规则，无论自动行号是否与正确的子索引对应？也许还有一些其他的 CSS 选择器组合可以完成这项工作？

4

2 回答 2

2

修复计数不是问题，因为您可以使用counter-increment: line 0;具有更高特异性或.!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/

于 2012-06-01T19:28:44.203 回答
0

对于问题 2，如果class="fallback"您的小提琴仍然存在，而不仅仅是问题解释的一部分，您可以将其用作解决方案：放弃 nth-child(5n) 并使用后备作为指标，如果行数应该显示与否。

请参阅更新的 jsFiddle。
我在其中插入了不属于这首诗的一行，以查看它是否有效，并且确实有效：您可以删除该行，其余部分将保持同步。

于 2012-06-01T19:44:34.667 回答