CSS中的报告节样式列表编号？ [英] Report section style list numbering in CSS?

问题描述

现在我知道正常CSS列表样式（罗马，拉丁等），并且肯定在几年前，他们有点不灵活，不允许像：

（a）

或

a）

a。

现在我相信你可以得到类似上面的效果： before和：after伪元素。那是对的吗？

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

1. 简介
   1.1目标
   1.2假设
   1.3限制
   1.3.1 ...


2. 新区
   ...

等。

解决方案

请参阅生成的内容，自动编号和列表。

这个例子显示了一个方法来为
章节和Chapter
1，1.1，1.2等编号。

  H1：before {
 content：Chaptercounter（chapter） 
 counter-increment：chapter; / *加1到章节* / 
 counter-reset：section; / *将section设置为0 * / 
} 
 H2：before {
 content：counter（chapter）。计数器（区）; 
 counter-increment：section; 
} 
  

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

Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:

(a)

or

a)

only

a.

Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?

My main question however is that I want to have report style numbering:

1. Introduction 1.1 Objectives 1.2 Assumptions 1.3 Limitations 1.3.1 ...
2. New Section ...

and so on.

Can CSS do this and, if so, whats the browser compatibility like?

解决方案

See Generated content, automatic numbering, and lists.

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

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

Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.

这篇关于CSS中的报告节样式列表编号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！