使用HTML5和CSS3重新创建TOC书籍

Question

解决方案要求

第一要求
必须创建三级深度的缩进有序嵌套列表项，以产生看起来像
的结果 1.1,1.2,1.3,1.3.1（而不仅仅是1,2,3，......）

第二项要求
长列表项必须包含在行的末尾并保持该级别的缩进。

第3项要求
列表项后显示点到页面链接所在的行尾。

所需结果的示例

1. Lorem ipsum justo id。 Neque elit platea volutpat velit dui ac，commodo class，libero pellentesque quisque massa tristique。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 1
   
2. 多洛坐下来。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 2
   2.1。 Pharetra sodales varius mauris。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 .. 。 。 。 。 。 。 。 。 。 。 。 。 5
   2.2。 Nec commodo eu in duis。 Erat adipiscing egestas porttitor aliquam consequat。 Feugiat eget
   molestie。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 .. 8
   2.2.1 Nunc non pede orem metus，ac eum diam。 Imperdiet morbi eu in amet，sed wisi ut vestibulum in nam，nec quisque。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 .. 。 。 。 。 。 。 0.10
   2.3。 Metus curabitur tristique。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 12个
   
3. Vitae placerat。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 .17
   

以下小提琴符合要求1＆amp; 2对于解决方案的要求，但我正在努力寻找工作解决方案来增加领导者点的第三个要求。任何解决方案？

http://jsfiddle.net/digiron/bhr3pvc1/1/

CSS

/* Ordered List nested numbering */
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

/* Ordered List nested indent */
ol > li {    
    display: table;
}

ol > li::before {    
    display: table-cell;
    text-align: right;
    padding-right: 0.5em;   
}

Answer 1

您可以在:after代码上混合使用before和li来同时拥有子弹（content: "\2022";）和计数器

Edit of your first fiddle

另一个带有自定义计数器和子弹的片段：

jsfiddle

HTML：

<ul>
    <li>banana</li>
    <li>apple</li>
    <li>orange</li>
</ul>

JS：

ul
{
    counter-reset: list-counter;
    list-style: none;
}

ul li
{
    counter-increment: list-counter;
}

ul li:before
{
    content: counter(list-counter) " \2022  ";
}

ul li:nth-child(1):before
{
    color: red;
}

ul li:nth-child(2):before
{
    color: green;
}

ul li:nth-child(3):before
{
        color: blue;
}