Question

现在我知道“正常”的CSS列表样式（罗马，拉丁语等），并且在过去的几年里，他们在不允许的情况下有点不灵活：

（a）中

或

A）

仅

一个。

现在我相信你可以使用：before和：after伪元素获得类似上面的效果。那是对的吗？最重要的是浏览器兼容性，如果可以的话？

然而，我的主要问题是我想要报告样式编号：

言 1.1目标 1.2假设 1.3限制 1.3.1 ......
新科 ...

等等。

CSS可以做到这一点，如果是这样，那么浏览器的兼容性如何？

Answer 1

请参阅Generated content, automatic numbering, and lists。

此示例显示了一种编号方式章节和章节“章节 1“，”1.1“，”1.2“等。

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

编辑：quirksmode.org在浏览器上有更好的css支持表。几乎所有浏览器，除了IE8b2之前的IE。所以是的，完全没用。

Answer 2

以下是CSS2自动编号和递增的W3C规范，以及1.1,1.2,1.3类型编号的示例。

http://www.w3.org/TR/CSS2/generate.html#counters

我无法帮助你解决支持问题。

Answer 3

一个简单的标记示例是：

<ol>
    <li>level one</li>
    <ol start="10"> 
        <li>level two</li>
        <li>level two</li>
        <ol start="110">
            <li>level three</li>
        </ol> 
        <li>level two
    </ol> 
    <li>level one</li>
</ol>

结果是：

   1.  level one
        10. level two
        11. level two
             110. level three
        12. level two 
   2. level one

浏览器支持相当广泛：MSIE6符合。这是HTML 4.0

Answer 4

这是我的纯css解决方案的完整版本，一直到h6级。使用IE9和Firefox 28进行测试。

body {
  counter-reset:level1Header;
}
h1 {
  counter-reset:level2Header;
}
h2 {
  counter-reset:level3Header;
}
h3 {
  counter-reset:level4Header;
}
h4 {
  counter-reset:level5Header;
}
h5 {
  counter-reset:level6Header;
}

h1:before {
  counter-increment:level1Header;
  content:counter(level1Header) ". ";
}

h2:before {
  counter-increment:level2Header;
  content:counter(level1Header) "." counter(level2Header) " ";
}

h3:before {
  counter-increment:level3Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) " ";
}

h4:before {
  counter-increment:level4Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) " ";
}

h5:before {
  counter-increment:level5Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) " ";
}

h6:before {
  counter-increment:level6Header;
  content:counter(level1Header) "." counter(level2Header) "." counter(level3Header) "." counter(level4Header) "." counter(level5Header) "." counter(level6Header) " ";
}

在CSS中报告部分样式列表编号？

4 个答案: