CSS中的报告节样式列表编号？

问题描述

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

（a）

或

a）

a。

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

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

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


2. 新区
   ...

等。

解决方案

请参阅。

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

编辑：在浏览器上有一个更好的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. Introduction1.1 Objectives1.2 Assumptions1.3 Limitations1.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.

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中的报告节样式列表编号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！