你可以使用计数器来做到这一点:

下面的样式表编号嵌套列表项，如“1”、“1.1”、“1.1.1”等。 OL {counter-reset: item} LI{显示:块} LI:前面{内容:计数器(项目，“。”)“”;反增量:item}

例子

ol(反重置:项目) 李显影:街区! 李:之前(项目，“项目”)”;补充:项目: < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >

有关更多信息，请参见嵌套计数器和范围。

这是正确的代码，如果你想第一个子李调整其他css的大小。

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

HTML文件。

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

在不久的将来，您可能能够使用::marker伪元素在一行代码中实现与其他解决方案相同的结果。

记得检查浏览器兼容性表，因为这仍然是一个实验技术。 在撰写本文时，只有Firefox和Firefox for Android(从版本68开始)支持此功能。

这是一个抽泣，如果尝试在一个温和的浏览器: 签名。‘:’的 李正左:0。 < ol > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < li > li元素< / li > < li > li元素 < ol > <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> < / ol > < / li > < / ol >

你可能也想看看smashingmagazine上关于这个话题的文章。

下面的方法对我很有效:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

看:http://jsfiddle.net/rLebz84u/2/

或者这个http://jsfiddle.net/rLebz84u/3/ 有更多和合理的文本

这里发布的解决方案对我来说并不是很好，所以我把这个问题和下面的问题混合在一起:有可能在HTML中创建多级有序列表吗?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

结果:

注:截图，如果你想看到源代码或任何来自这篇文章:http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

我有一些问题时，有两个列表和第二个是在DIV 第二个列表应该从1开始。不是2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

编辑: 我用这个方法解决了问题 http://jsfiddle.net/hy5f6161/