Question

我以为我可以做以下事情：

<ol style = "type:numeric; glyphs: '0' '1';">
    <li> Item 0 </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ol>

生成以二进制计数的列表。也就是说，上面的例子应该产生：

0 的。第0项

1 。第1项

10 。第2项

但是，唉，它没有这样的事情。 Firefox只是忽略了我的风格建议。

我正在http://www.w3.org/TR/css3-lists/（第8.1.2节）

上阅读此内容

但显然我误解/误解了规范。有什么帮助吗？

谢谢！

Answer 1

type和glyphs属性位于@counter-style声明旁边，因此您需要定义计数器样式然后使用它。

@counter-style mybinary {
    type: numeric;
    glyphs: '0' '1' '2';
}

<ol style = "list-style-type:mybinary;">
    <li> Item 0 </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ol>

我认为没有任何浏览器能够实现这一点，因为除了工作草案和MDN的这一行之外，这是我所发现的全部内容

CSS Lists and Counters Module Level 3工作草案添加对@ counter-style规则中使用的标识符的支持并将其添加到关键字。这些更改尚未反映在此页面上，因为当前没有浏览器实现它们。

Answer 2

如果你想在每个浏览器中看到它，你需要使用另一种语言（javascript / jquery，或者来自你服务器的东西）

最后，你只需要有类似的东西： http://jsfiddle.net/KdhxX/

<ol>
  <li value="0"> Item 0 </li>
  <li value="1"> Item 1 </li>
  <li value="10"> Item 2 </li>
</ol>

将值插入由javascript或服务器端语言

填充的“li”中

如何使用<ol>标签创建二进制计数器？</ol>

2 个答案: