CSS学习笔记：生成内容

CSS2提出了一个称为生成内容的新特性。这是指由浏览器创建的内容，而不是由标志或内容来表示。

例如，列表标志就是生成内容，这不是开发人员写的而是由浏览器自动生成的。

插入生成内容

为了向文档中插入生成内容，可以使用：before和：after伪元素。这些为元素会根据content属性把生成内容放在一个元素内容的前面或后面。

注意，生成内容和元素之间没有空格，如果想要空格就要在content中指定好。

例如，可以在指向PDF文档的链接最后插入一个小图标：

a.pdf-doc:after{content:url(pdf.gif);}

对于生成内容有一些限制：

• ：after和：before内容不能浮动或定位。
• 如果：before或：after选择器的主体是块级元素，则生成内容的display属性只接受值none、inline、block和marker，其他值都处理成block
• 如果：before或：after选择器的主体是行内元素，则生成内容的display属性只接受值none、inline，其他值都处理成inline

例如：

em:after {content:"(!)";display:block;}

由于em为行内元素，生成内容不能是块级元素，因此值block重置为inline。

h1:after {content:"(!)";display:block;}

而此时h1为块级元素，因此生成内容就被置为块级元素。

生成内容还有一个很有意思的方面，它继承与之关联的元素的值：

p{color:green}p:before{content:":::"}

此时生成内容的文本颜色也为绿色。
当然，这种值继承只适用于可继承的属性。

指定内容

content属性用于指定内容，应用于：atfer和：before伪元素。
其属性值有以下几类：

• none：不会产生伪类元素
• normal：:before 和 :after 伪类元素中会被视为 none
• 文本内容：原样显示文本，即使其中包含某种标记也不例外：

h2:before{content:"<em>&para</em>";}

因此，如果希望生成内容中有一个换行，不能直接使用< br>,而是要使用/A.

• URL值：指向一个外部资源，插入到文档中适当的位置。如果用户代理出于某种原因不支持所指定的资源，此时用户代理会完全忽略这个资源，不插入任何内容。
• 属性值：取一个元素的属性值，使之作为文档显示的一部分。

//取该a元素的href属性显示a[href]:after{content:attr(href);}

这对于打印样式表可能很有用，所有属性值都可以作为生成内容插入：alt文本、class或id值，以及任何属性。
如，创作人员可能会明确显示块引用的引用信息：

blockquote:after{content:"("attr(cite)")";display:block;}

如果一个属性不存在，会在相应位置插入一个空串。

• 生成引号：由于提供了open-quote等成对的content值及属性quotes，使得管理生成引号及其嵌套行为成为可能。

使用quotes属性时，其值为一对字符串，前一个串定义了开始引号，第二个串定义了结束引号：

quotes: "«" "»";  

content的属性值open-quote和close-quote用于插入合适的引号符号，它们使用quotes值来确定如何工作。

利用quotes也可以定义任意多层嵌套引号。
而content属性值 no-open-quote | no-close-quote 就用于改变引号层级。
（先不详细展开引号相关的属性了）

• 计数器
  例如，有序列表中的列表项标志就是计数器。

创建计数器的基础有两个方面：一是设置计数器的起点，二是能将其递增一定的量。
前者由属性counter-reset处理：

第一个值是计数器标识符，只是创作人员创建的一个标签。
以下规则中，计数器counter-reset: counter-name;就在重置时定义：

/* Set counter-name to 0 */counter-reset: counter-name;

默认地，计数器重置为0,。如果想重置为另一个数，可以在标识符后面声明这个数：

/* Set counter-name to -1 */counter-reset: counter-name -1;

还可以在标识符-整数对中一次重置多个标识符，如果少了一个整数，则默认为0：

/* Set counter1 to 1, and counter2 to 4 */counter-reset: counter1 1 counter2 4;/* Set counter1 to 0, and counter2 to 4 */counter-reset: counter1 counter2 4;

总之，需要一个来只是元素将计数器递增，否则计数器将永远保持计数器重置声明中指定的值。而所需的递增属性就是counter-increment。

类似于counter-reset，counter-increment也接收标识符-整数对，其中整数部分可以是0，也可以是负数或正数。
与counter-reset的区别在于，如果counter-increment中的标识符-整数对少了一个整数，则默认为1而不是0.

举例来说，以下显示了用户代理如何定义计数器生成有序列表传统的1,2,3计数：

ol{counter-resert:ordered; }//defaults to 0ol li{counter-increment:ordered;} //defaults to 1

如果希望从0向下计数：

ol{counter-resert:ordered;} //defaults to 0ol li{counter-increment:ordered;} 

使用计数器

在设置好counter-reset和counter-increment之后，在content上使用 counter() 函数来给元素增加计数器。

body {  counter-reset: section;           /* 重置计数器成0 */}h3:before {  counter-increment: section;      /* 增加计数器值 */  content: "Section " counter(section) ": "; /* 显示计数器 */}

counter（）有两种用法：
- counter(name) ， name就是counter-reset的名称
- counter(name, style)，其中style支持的关键字值就是list-style-type支持的那些值。作用是，我们递增递减可以不一定是数字，还可以是英文字母或者罗马数字。

还有一个方法为counters（），用于实现嵌套计数。
用法为counters(name, string)，string参数为引号包围的字符串，表示子序号的连接字符串。
要实现嵌套计数，必须为每一个列表容器都设定新的counter-reset，作用于该容器，重新开始计数。
比如这个CSS例子：

ol {  counter-reset: section;      /* 为每个ol元素创建新的计数器实例 */  list-style-type: none;}li:before {  counter-increment: section;            /* 只增加计数器的当前实例 */  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */}

<ol>  <li>item</li>          <!-- 1     -->  <li>item               <!-- 2     -->    <ol>      <li>item</li>      <!-- 2.1   -->      <li>item</li>      <!-- 2.2   -->      <li>item           <!-- 2.3   -->        <ol>          <li>item</li>  <!-- 2.3.1 -->          <li>item</li>  <!-- 2.3.2 -->        </ol>        <ol>          <li>item</li>  <!-- 2.3.1 -->          <li>item</li>  <!-- 2.3.2 -->          <li>item</li>  <!-- 2.3.3 -->        </ol>      </li>      <li>item</li>      <!-- 2.4   -->    </ol>  </li>  <li>item</li>          <!-- 3     -->  <li>item</li>          <!-- 4     --></ol><ol>  <li>item</li>          <!-- 1     -->  <li>item</li>          <!-- 2     --></ol>

另外需要注意，一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。