web.Frontend

Chapter 12. Lists and Generated Content

只有display为list-item的元素才可以接受list-style一类的属性。list-style-type是会继承的，所以如果需要，则须给不同级别的list指定不同的list-style-type。list-style-image和list-style-type是不冲突的，list-style-type通常用来给list-style-image做备份，好比background-color对background-images的关系。不同的是list相关的属性是会继承的，所以如果有多层的list，需要注意将不需要image项目的list-style-image设成none。

generated content生成内容

如果主元素是block，那么可接受的dispaly属性是：none, inline, block, marker。其他属性一律被认作block。
如果主元素是inline，那么可接受的dispaly属性是：none, inline。其他属性一律被认作inline。
生成内容会继承其主元素的样式

content属性，应用于:after或者:before伪类，opera似乎可以应用于任何元素。

可以取值normal | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

取string的时候将会逐字的显示，因此<>等无需转义直接显示，意思无法在生成内容中插入标记，如果需要换行，则需要使用\A，同样也可以使用十六进制转义符\00AB等。可惜目前在生成内容中插入转义符还没有广泛的浏览器支持，甚至是那些支持生成内容的浏览器，简单测试了一下opera8是支持的，firefox不支持。

URI是形如 url(http://xxxx) 的使用方式，用于嵌入浏览器可以直接显示的任何格式（包括视频，图像，声音等等），当然如果浏览器不支持将会忽略之。测试了一下firefox和opera似乎都是只能接受图像。

使用attr，可以将主元素的某个属性显示出来，这个很有用。比如在用于打印的CSS中，给每个连接后面添加其实际地址；比如在一个blockquote的后面显示其cite属性值等等。css2.x定义用attr取到的内容也是逐字显示的，如果如果属性中有一些markup字符，将会原样输出。

open-quote和close-quote，用于显示quote属性指定的引号。no-open-quote和no-close-quote用于多段引用，中间段落只有左引号，没有右引号时防止它们使用次级引号。quote使用一对或多对字符串指示open-quote和close-quote所用的符号，同样可以使用十六进制unicode转义。如果嵌套级别超过quote中指定的对数，那么更深层次的级别将重复使用最后一对引号。

关于counter，这也是个蛮有用的东西，firefox1.5新增的支持项目，IE是照例不支持的。

首先是counter-reset,将一个计数器清零，当然清零未必就是清到0，也可以清到-1,2等等，这里的清零其实就是一个类似初始化的过程。可以带一对或多对参数，前者是计数器的标识符，后者是初始值，初始值缺省为0。然后是给需要计数的元素设定counter-increment，即每次出现该元素时某个计数器的增量。同样也是可以带一对或多对参数，前者是计数器标识符，后者是增量值，初始值缺省为1。最后就是显示了，使用content显示counter值，将指定计数器显示出来，可以带两个参数，第一个是计数器标识符，第二个是一个类似list-style-type的参数，默认是数字。
只有看例子才能说清楚了，对于如下HTML

<h1>111111111111</h1>
<h2>2222222222222</h2>
<h3>333333333333</h3>
<h3>333333333333</h3>
<h3>333333333333</h3>
<h1>111111111111</h1>
<h2>2222222222222</h2>
<h2>2222222222222</h2>
<h3>333333333333</h3>
<h3>333333333333</h3>
<h3>333333333333</h3>
<h3>333333333333</h3>

应用如下CSS：

body{
  counter-reset:chapter
}
h1{
  counter-reset: section subsec;
}
h1:before {
  counter-increment: chapter ;
  content: counter(chapter,upper-alpha) ". ";
}
h2{counter-reset: subsec;}
h2:before {
  counter-increment: section;
  content: counter(chapter,upper-alpha) "." counter(section) ". ";
}
	
h3:before {
  counter-increment: subsec 10;
  content: counter(chapter,upper-alpha) \""."
     counter(section) "."  counter(subsec) ". ";
}

最终显示结果是类似这样的：

需要注意的一点，firefox下counter-reset不能应用于:after和:before伪类中，opera则可以；而counter-increment在这两个浏览器中则都可以应用于伪类，留意一下。
再有就是显示时，是先计数，后显示。所以虽然counter-reset默认是0，但是可以看到第一个元素出现时都是从1开始显示的。

还有一个值counters，比counter多一个s，它的作用是将所有的计数器写在一起，不用像上面的例子一个一个加了，这对于嵌套的计数很有用，比如对于如下HTML

<ol>
  <li>1111111
    <ol>
      <li>22222222</li>
      <li>22222222</li>
      <li>22222222
        <ol>
          <li>333333333</li>
          <li>333333333</li>
          <li>333333333</li>
        </ol>
      </li>
      <li>22222222</li>
    </ol>
  </li>
  <li>111111111</li>
  <li>111111111
    <ol>
      <li>22222222</li>
      <li>22222222</li>
      <li>22222222</li>
    </ol>
  </li>
</ol>

而使用如下CSS

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

即可得到类似下图的效果：

如果不使用counters而使用counter，那么则每一级都需要一个计数器总共需要三个计数器，对每个计数器还要指定counter-reset,counter-increment等等，将会相当麻烦，而使用counters像这种嵌套情况下的计数则简单多了。
counters可以带三个参数，第一个是计数器标识，第二个是不同级别的计数器之间的连字符，第三个是同样是类似list-style-tpye的值，默认是数字。