CSS权威指南第九弹：列表与生成内容

列表

列表属性
list-style-type:定义列表的标志类型
list-style-image:可以使用图像作为标志类型。有继承，子级列表会继承该图像。
list-style-position:inside|outside|inherit， inside:列表符号在内容开始的地方，outside：列表符号单独列在列表内容的外面。
list-style:有继承性,三个属性没有顺序要求

列表标志位置
标志相对于内容绝对定位，css2用display:marker和marker-offset属性来调整标志的相对于内容的距离，css2.1觉笨拙，淘汰，css3草案定义使用::maker伪元素来控制标志与列表项之间的距离，比如：li::marker{margin-right:20px;} 浏览器现在并没有实现。

生成内容

插入生成内容
语法：伪元素：before 和：after ； content 属性值为插入的内容。

注意：生成内容放在元素框的内部。css2及css2.1明确地禁止浮动或定位：before和：after内容，且禁止使用列表样式属性和表属性。另外有2个限制：
1.若这两个选择器的主体是块级元素，则display属性只接受值None、inline、block、和marker 其他值处理为block。
2.若这个两个选择器的主体是行内元素，属性display只能接受none和inline。其他值处理为inline.

举例：

h1:before{
    content: "New Section";
    display: block;
    color: gray;
    border-bottom: 1px dotted black;
    margin-bottom: 0.5em;

那么就会在正常的h1段落之前生成一个块级元素，里面显示“New Section”，并且在下面还会有一系列黑色小点。

继承：生成内容由与之关联的元素继承值（只应用于可继承的属性）。如：关联主体是绿色，生成内容也是绿色

指定生成内容

1.串值：原样显示

2.回车：不能直接使用</br>，要使用串\A。如果是一个很长的串，则要用\符号贵换行符转义

3.利用URI值插入外部资源

插入属性值

生成引号

举例：双引号包含单引号，或者反之

计数器
有序列表中的列表项标志就是计数器

创建计数器的基础包括两个方面，一个是设置计数器的起点，一个是设置其递增的量。这分别与counter-reset和counter-increment有关。

注意counter-reset后跟的是一个自定义的计数器名，初始值默认为0，可以通过在变量名后声明一个数来重置其初始值。

注意counter-increment后跟的是计数器的名字，默认加1，可以改变其后的数字来控制增量。

使用计数器
counter()函数
counter()函数接受两个参数，而且两参数之间用逗号(,)来分隔，第一个参数是计数器标识符，第二个参数设置计数器风格(可省略)，与列表中list-style-type值相同。同样的，可以使用多个counter()函数。

counters(计数器名称, 嵌套时拼接字符串[, 可选的显示风格])
content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1 

举例：

<div id="oShow">
                <h2>第一章</h2>
                <h3>第一部分</h3>
                <p>第一节</p>
                <p>第二节</p>
                <h3>第二部分</h3>
                <p>第一节</p>                
                <h2>第二章</h2>
                <h3>第一部分</h3>
                <p>第一节</p>
                <p>第二节</p>
                <h3>第二部分</h3>
                <p>第一节</p>                
                <h2>第三章</h2>
                <h3>第一部分</h3>
                <p>第一节</p>
                <p>第二节</p>
                <h3>第二部分</h3>
                <p>第一节</p>                
            </div>

css部分：

body,h2,h3,p{
    margin: 0;
}    
#oShow{
    counter-reset: c2;
}
#oShow h2{
    counter-reset: c3 cp;
    counter-increment: c2;
}
#oShow h3{
    counter-increment: c3;    
    counter-reset: cp;
    text-indent: 2em;
}
#oShow p{
    counter-increment: cp; 
    text-indent: 4em;   
}
#oShow h2:before{
    content: counter(c2);
}
#oShow h3:before{
    content: counter(c2) '.' counter(c3);
}
#oShow p:before{
    content: counter(c2) '.'  counter(c3)  '.' counter(cp);    
}

显示结果：

计数器与作用域
counters()函数：将列表嵌套写的简明

<ol>
        <li>绪论</li>
        <li>正文
            <ol>
                <li>正文一</li>
                <li>正文二</li>
                <li>正文三
                    <ol>
                        <li>正文三内容一</li>
                        <li>正文三内容二</li>
                        <li>正文三内容三</li>
                    </ol>
                </li>
                <li>正文四
                    <ol>
                        <li>正文四内容一</li>
                        <li>正文四内容二</li>
                        <li>正文四内容三</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>总结</li>
    </ol>

CSS部分：

ol{
    list-style: none;
    counter-reset: ordered;
}
li:before{
    counter-increment: ordered;
    content: counters(ordered,".")" ";
}

结果：