内容
在某些情况下，作者可能希望用户代理呈现并非来自文档树的内容。一个熟悉的例子是编号列表；作者不希望明确列出这些数字，而是希望用户代理自动生成它们。同样，作者可能希望用户代理在图表的标题前插入“图”，或在第七章的标题前插入“第7章”。尤其对于音频或盲文，用户代理应该能够插入这些字符串。
在CSS 2.2中，内容可以通过两种机制生成：
作者通过:before和:after伪元素指定生成内容的样式和位置。顾名思义，:before和:after伪元素指定内容在元素的文档树内容之前和之后的位置。'content'属性与这些伪元素结合使用，指定插入的内容。
例如，以下规则在"类"属性值为"note"的每个P元素的内容之前插入字符串"注意："：
p.note:before { content: "注意：" }
元素生成的格式化对象（例如框）包括生成的内容。因此，例如，将上述样式表更改为：
p.note:before { content: "注意：" }
p.note { border: solid green }
将导致在整个段落周围（包括初始字符串）渲染一个绿色的实线边框。
:before和:after伪元素从文档树中它们所附加的元素继承任何可继承的属性。
例如，以下规则在每个Q元素之前插入一个开引号。引号的颜色将为红色，但字体将与Q元素其余部分的字体相同：
q:before {
content: open-quote;
color: red
}
在:before或:after伪元素声明中，非继承属性将取其初始值。
因此，例如，由于'display'属性的初始值为'inline'，前例中的引号作为内联框插入（即与元素的初始文本内容在同一行）。 下一个例子明确将'display'属性设置为'block'，以便插入的文本成为一个块级元素：
body:after {
content: "完";
display: block;
margin-top: 2em;
text-align: center;
}
:before和:after伪元素与其他框交互，就像它们是实际插入在其关联元素内的真实元素一样。
例如，以下文档片段和样式表：
<p> Text </p> p:before { display: block; content: 'Some'; }
...would render in exactly the same way as the following document fragment and style sheet:
<p><span>Some</span> Text </p> span { display: block }
Similarly, the following document fragment and style sheet:
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
注意。 本规范未完全定义:before和:after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中更详细地定义。
| 名称: | content |
|---|---|
| 值: | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| 初始值: | normal |
| 适用于: | :before和:after伪元素 |
| 是否继承: | no |
| 百分比: | N/A |
| 媒体: | 所有 |
| 计算值: | 在元素上，总是计算为'normal'。在:before和:after上，如果指定了'normal'，则计算为'none'。否则，对于URI值，为绝对URI；对于attr()值，为生成的字符串；对于其他关键字，按指定值计算。 |
此属性与:before和:after伪元素一起使用，以在文档中生成内容。值具有以下含义：
'display'属性控制内容是放置在块框中还是内联框中。
以下规则在每个H1元素之前生成字符串“Chapter: ”：
H1:before {
content: "Chapter: ";
display: inline;
}
作者可以通过在'content'属性后的字符串中编写"\A"转义序列，在生成的内容中包含换行符。此插入的换行符仍然受'white-space'属性的约束。有关"\A"转义序列的更多信息，请参见“字符串”和“字符和大小写”。
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre"
}
生成的内容不会更改文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新解析）。
在CSS 2.2中，作者可以以样式敏感和上下文依赖的方式指定用户代理应如何呈现引号。'quotes'属性为每个嵌套引号级别指定引号对。'content'属性提供对这些引号的访问，并在引号前后插入它们。
| 名称: | quotes |
|---|---|
| 值: | [<string> <string>]+ | none | inherit |
| 初始值: | 取决于用户代理 |
| 适用于: | 所有元素 |
| 是否继承: | yes |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
该属性为任意数量的嵌套引号指定引号。值具有以下含义：
例如，应用以下样式表：
/* 为两种语言指定两个级别的引号对 */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }
/* 在Q元素内容前后插入引号 */
q:before { content: open-quote }
q:after { content: close-quote }
到以下HTML片段：
<HTML lang="zh-hans>
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
将允许用户代理生成：
"Quote me!"
而这个HTML片段：
<HTML lang="no">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
将生成：
«Trøndere gråter når "Vinsjan på kaia" blir deklamert.»
注意。 尽管在前面的示例中，通过'quotes'指定的引号方便地位于计算机键盘上，但高质量的排版需要不同的ISO 10646字符。以下信息表列出了一些ISO 10646引号字符：
| 字符 | 大致呈现 | ISO 10646代码（十六进制） | 描述 |
|---|---|---|---|
| " | " | 0022 | 引号标记[ASCII双引号] |
| ' | ' | 0027 | 撇号[ASCII单引号] |
| ‹ | < | 2039 | 单左尖引号 |
| › | > | 203A | 单右尖引号 |
| « | « | 00AB | 左尖双引号 |
| » | » | 00BB | 右尖双引号 |
| ‘ | ` | 2018 | 左单引号[单高6] |
| ’ | ' | 2019 | 右单引号[单高9] |
| “ | `` | 201C | 左双引号[双高6] |
| ” | '' | 201D | 右双引号[双高9] |
| „ | ,, | 201E | 双低9引号[双低9] |
引号通过'content'属性的'open-quote'和'close-quote'值在文档中适当的位置插入。根据嵌套的深度，每次出现'open-quote'或'close-quote'时，将被'quotes'值中的一个字符串替换。
'Open-quote'指的是一对引号中的第一个，'close-quote'指的是第二个。使用哪对引号取决于引号的嵌套级别：在当前出现之前生成的所有文本中'open-quote'的出现次数减去'close-quote'的出现次数。如果深度为0，则使用第一对；如果深度为1，则使用第二对，依此类推。如果深度大于引号对的数量，则重复使用最后一对。一个会使深度变为负值的'close-quote'或'no-close-quote'是错误的，并且会被忽略（在渲染时）：深度保持在0且不会渲染引号标记（尽管'content'属性的其余值仍然会插入）。
注意。 引号深度与源文档的嵌套或格式结构无关。
一些排版风格要求在跨越多个段落的引号的每个段落之前重复开引号，但只有最后一个段落以闭引号结束。在CSS中，这可以通过插入“虚幻”的闭引号来实现。关键字'no-close-quote'减少了引号级别，但不插入引号标记。
以下样式表在BLOCKQUOTE中的每个段落上放置开引号，并在最后插入一个闭引号：
blockquote p:before { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }
这依赖于最后一个段落被标记为类“last”。
为保持对称性，还有一个'no-open-quote'关键字，它不会插入任何内容，但会将引号深度增加一级。
CSS 2.2中的自动编号由两个属性控制，分别是'counter-increment'和'counter-reset'。这些属性定义的计数器与'content'属性的counter()和counters()函数一起使用。
| 名称: | counter-reset |
|---|---|
| 值: | [ <identifier> <integer>? ]+ | none | inherit |
| 初始值: | none |
| 适用于: | 所有元素 |
| 是否继承: | no |
| 百分比: | N/A |
| 媒体: | 所有 |
| 计算值: | 按指定值 |
| 名称: | counter-increment |
|---|---|
| 值: | [ <identifier> <integer>? ]+ | none | inherit |
| 初始值: | none |
| 适用于: | 所有元素 |
| 是否继承: | no |
| 百分比: | N/A |
| 媒体: | 所有 |
| 计算值: | 按指定值 |
'counter-increment'属性接受一个或多个计数器的名称（标识符），每个名称后面可以跟一个整数。该整数表示每次出现元素时计数器增加的量。默认增量为1。允许使用零和负整数。
'counter-reset'属性还包含一个或多个计数器的名称，每个名称后面可以跟一个整数。该整数给出了每次出现元素时计数器被设置的值。默认值为0。
关键字'none'、'inherit'和'initial'不能用作计数器名称。单独使用'none'意味着没有计数器被重置或增加。单独使用'inherit'具有其通常的含义（参见6.2.1）。'initial'保留供将来使用。
此示例显示了使用“第1章”、“1.1”、“1.2”等编号章节和部分的方法：
BODY {
counter-reset: chapter; /* 创建一个章节计数器范围 */
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* 将章节加1 */
}
H1 {
counter-reset: section; /* 将节计数器重置为0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
如果一个元素同时递增/重置计数器并使用它（在其:before或:after伪元素的'content'属性中），则在递增/重置后使用计数器。
如果一个元素既重置又递增计数器，则先重置计数器，然后再递增。
如果在'counter-reset'和'counter-increment'属性的值中多次指定同一个计数器，则按指定的顺序处理每次重置/递增。
以下示例将把'section'计数器重置为0：
H1 { counter-reset: section 2 section }
以下示例将把'chapter'计数器增加3：
H1 { counter-increment: chapter chapter 2 }
'counter-reset'属性遵循层叠规则。因此，由于层叠，以下样式表：
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
将只重置'imagenum'。要同时重置两个计数器，必须将它们一起指定：
H1 { counter-reset: section -1 imagenum 99 }
计数器是“自嵌套”的，这意味着在后代元素或伪元素中重置计数器时，会自动创建该计数器的新实例。这对于HTML中的列表等情况非常重要，在这些情况下，元素可以嵌套到任意深度。为每一级定义唯一命名的计数器将是不可能的。
因此，以下内容足以对嵌套的列表项进行编号。其结果与在LI元素上设置'display:list-item'和'list-style: inside'非常相似：
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
计数器的范围从文档中第一个为该计数器设置'counter-reset'的元素开始，包括该元素的后代及其后续兄弟元素及其后代。然而，它不包括由该元素的后续兄弟元素上的'counter-reset'或同一元素上的后续'counter-reset'创建的同名计数器的范围内的任何元素。
如果元素或伪元素上的'counter-increment'或'content'引用了不在任何'counter-reset'范围内的计数器，实现在该元素或伪元素上应表现得如同该计数器已被重置为0一样。
在上面的例子中，OL将创建一个计数器，OL的所有子元素都将引用该计数器。
如果我们用item[n]表示“item”计数器的第n个实例，用“{”和“}”表示范围的开始和结束，那么以下HTML片段将使用所指示的计数器。（我们假设样式表如上例所示）。
<OL> <!-- {item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item <!-- item[0]++ (=2) -->
<OL> <!-- {item[1]=0 -->
<LI>item</LI> <!-- item[1]++ (=1) -->
<LI>item</LI> <!-- item[1]++ (=2) -->
<LI>item <!-- item[1]++ (=3) -->
<OL> <!-- {item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
<OL> <!-- }{item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[1]++ (=4) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[0]++ (=3) -->
<LI>item</LI> <!-- item[0]++ (=4) -->
</OL> <!-- -->
<OL> <!-- }{item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item</LI> <!-- item[0]++ (=2) -->
</OL> <!-- -->
另一个例子，显示了在非嵌套元素上使用计数器时范围如何工作。此示例显示了上面给出的样式规则如何应用于给定的标记。
<!--"chapter"计数器|"section"计数器-->
<body> <!-- {chapter=0 | -->
<h1>关于CSS</h1> <!-- chapter++ (=1) | {section=0 -->
<h2>CSS 2</h2> <!-- | section++ (=1) -->
<h2>CSS 2.2</h2> <!-- | section++ (=2) -->
<h1>样式</h1> <!-- chapter++ (=2) |}{ section=0 -->
</body> <!-- | } -->
'counters()'函数生成一个由范围内所有同名计数器组成的字符串，并以给定字符串分隔。
以下样式表将嵌套列表项编号为“1”、“1.1”、“1.1.1”等。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
默认情况下，计数器使用十进制数字格式化，但'list-style-type'属性可用的所有样式也可用于计数器。表示法如下：
counter(name)
用于默认样式，或者：
counter(name, <'list-style-type'>)
所有样式都允许，包括'disc'、'circle'、'square'和'none'。
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, lower-greek) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
未显示的元素（'display'设置为'none'）不能增加或重置计数器。
例如，使用以下样式表时，类为"secret"的H2不会增加'count2'。
H2.secret {counter-increment: count2; display: none}
未生成的伪元素也不能增加或重置计数器。
例如，以下代码不会增加'heading'：
h1::before {
content: normal;
counter-increment: heading;
}
另一方面，设置了'visibility'为'hidden'的元素确实会增加计数器。
CSS 2.2 提供了基本的列表视觉格式化。具有'display: list-item'的元素为元素的内容生成一个主要块级框，并且根据'list-style-type'和'list-style-image'的值，可能还会生成一个标记框，以视觉方式指示该元素是列表项。
列表属性描述了列表的基本视觉格式化：它们允许样式表指定标记类型（图像、符号或数字），以及标记相对于主要块级框的位置（在其外部或在内容前的内部）。它们不允许作者为列表标记指定不同的样式（颜色、字体、对齐方式等）或调整其相对于主要块级框的位置；这些可能会从主要块级框派生。
背景属性仅适用于主要块级框；“外部”标记框是透明的。
| 名称: | list-style-type |
|---|---|
| 值: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
| 初始值: | disc |
| 适用于: | 具有'display: list-item'的元素 |
| 是否继承: | yes |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
如果'list-style-image'的值为'none'或无法显示URI指向的图像，此属性指定列表项标记的外观。'none'值表示没有标记，否则有三种类型的标记：符号、编号系统和字母系统。
符号通过 disc，circle 和 square 指定。它们的确切呈现取决于用户代理。
编号系统通过以下方式指定：
字母系统通过以下方式指定：
本规范未定义字母系统在字母表末尾的换行方式。例如，在26个列表项之后，'lower-latin'的呈现是未定义的。因此，对于长列表，建议作者指定真正的编号。
CSS 2.2 未定义列表编号的重置和递增方式。这将在CSS列表模块中定义[CSS3LIST]。
例如，以下HTML文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Lowercase latin numbering</TITLE>
<STYLE type="text/css">
ol { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
可能会产生类似这样的效果：
i This is the first item. ii This is the second item. iii This is the third item.
列表标记的对齐方式（此处为右对齐）取决于用户代理。
| 名称: | list-style-image |
|---|---|
| 值: | <uri> | none | inherit |
| 初始值: | none |
| 适用于: | 具有'display: list-item'的元素 |
| 是否继承: | yes |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 绝对URI或'none' |
此属性设置将用作列表项标记的图像。当图像可用时，它将替换'list-style-type'标记。
图像的大小根据以下规则计算：
以下示例将每个列表项开头的标记设置为图像"ellipse.png"。
ul { list-style-image: url("http://png.com/ellipse.png") }
| 名称: | list-style-position |
|---|---|
| 值: | inside | outside | inherit |
| 初始值: | outside |
| 适用于: | 具有'display: list-item'的元素 |
| 是否继承: | yes |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
此属性指定标记框相对于主要块级框的位置。其值具有以下含义：
例如：
<HTML>
<HEAD>
<TITLE>Comparison of inside/outside position</TITLE>
<STYLE type="text/css">
ul { list-style: outside }
ul.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class="compact">
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
上例可能会被格式化为：
在从右到左的文本中，标记将位于框的右侧。
| 名称: | list-style |
|---|---|
| 值: | [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
| 初始值: | 见各个属性 |
| 适用于: | 具有'display: list-item'的元素 |
| 是否继承: | yes |
| 百分比: | N/A |
| 媒体: | 视觉 |
| 计算值: | 见各个属性 |
'list-style'属性是同时设置三个属性的简写：'list-style-type'，'list-style-image' 和 'list-style-position'在样式表中的相同位置设置。
ul { list-style: upper-roman inside } /* 任何"ul"元素 */
ul > li > ul { list-style: circle outside } /* 任何"ul"的子元素 "li" 的子元素 "ul" */
虽然作者可以直接在列表项元素（例如HTML中的"li"）上指定'list-style'信息，但应谨慎为之。以下规则看似相似，但第一个声明的是后代选择器，而第二个声明的是（更具体的）子选择器。
ol.alpha li { list-style: lower-alpha } /* 任何"li"的"ol"后代 */
ol.alpha > li { list-style: lower-alpha } /* 任何"ol"的"li"子元素 */
仅使用后代选择器的作者可能无法获得他们期望的结果。考虑以下规则：
<HTML>
<HEAD>
<TITLE>警告: 由于层叠顺序导致的意外结果</TITLE>
<STYLE type="text/css">
ol.alpha li { list-style: lower-alpha }
ul li { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>第一级
<UL>
<LI>第二级
</UL>
</OL>
</BODY>
</HTML>
期望的呈现是第一级列表项具有'lower-alpha'标签，第二级列表项具有'disc'标签。然而，层叠顺序将导致包含特定类信息的第一个样式规则覆盖第二个规则。通过使用子选择器可以解决此问题：
ol.alpha > li { list-style: lower-alpha }
ul li { list-style: disc }
另一种解决方案是在列表类型元素上仅指定'list-style'信息：
ol.alpha { list-style: lower-alpha }
ul { list-style: disc }
继承将把'list-style'值从OL和UL元素传递到LI元素。这是指定列表样式信息的推荐方法。
URI值可以与任何其他值组合，例如：
ul { list-style: url("http://png.com/ellipse.png") disc }
在上述示例中，当图像不可用时，将使用'disc'。
在'list-style'属性中，'none'值将设置未指定的'list-style-type'和'list-style-image'为'none'。但是，如果两者都已指定，则该声明有误（因此被忽略）。
例如，'list-style'属性的'none'值将'list-style-type'和'list-style-image'都设置为'none'：
ul { list-style: none }
结果是不会显示任何列表项标记。