目录
某些情况下，作者可能希望用户端渲染那些不在文档树中的内容。很熟悉的一个例子是记数的列表；作者不想显式地给出记数，他希望用户端自动地生成它们。类似地，作者可能希望用户端在一个图形的标题前面插入单词“图形”，或在第七章标题前插入“第七章”。特别是对于音频和盲文，用户端应该能够插入这样的字符串。
CSS2中，产生内容的机制有这样几个：
下面我们讨论和'content'属性相关的机制。
作者用:before和:after伪元素指定生成的内容的样式和位置。如其名所示，:before和:after伪元素指定了一个元素文档树内容之前和之后的内容。'content'属性，与这些伪元素联用，指定了插入的内容。
例如，下面的规则在每一个"class"属性为"note"的P元素的内容前面都插入字符串"Note: "：
P.note:before { content: "Note: " }
一个元素生成的格式化对象（如，控制框）包含生成的内容。因此，假定改变上面的样式表为：
P.note:before { content: "Note: " }
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: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
注意，一个音频用户端会在BODY内容渲染之后读出单词"The End"。
用户必须忽略与:before及:after伪元素相联的如下属性：'position'，'float'，list属性，以及表格属性。
:before和:after伪元素允许如下的'display'属性值：
注意。在将来的CSS级别中，可能允许其它值。
该属性和:before及:after伪元素联用来在文档中产生内容。取值的含义如下：
'display'属性控制内容是放置在一个块，行内还是在标记框中。
如果内容和媒介相关，作者应该将'content'声明放置在@media规则中。例如，文本可以用于任何媒介组，而图形仅适用于图形和点阵图形媒介组，而声音文件只适用于音频媒介组。
下面的规则使得在一个引用的结尾，播放一个声音文件（参见语音样式表一节，那里有更多的机制）：
@media aural {
BLOCKQUOTE:after { content: url("beautiful-music.wav") }
}
下面的规则在图形前插入HTML"alt"属性的文本。如果图形不被显示，读者还可以看到"alt"文本。
IMG:before { content: attr(alt) }
用户可以在生成的内容中加入新行，这可以通过在'content'属性之后的一个字符串中写入"\A"转义序列而达到。它插入了一个强制换行，类似于HTML中的BR元素。参见“字符串”和“字符和大小写”以了解关于"\A"转义序列的更多信息。
H1:before {
display: block;
text-align: center;
content: "chapter\A hoofdstuk\A chapitre"
}
生成的内容不改变文档树。特别地，它们并不反馈给文档语言处理器（如，进行再解析工作）。
注意。在将来级别的CSS中，'content'属性可能接受更多的值，允许它改变生成内容的部分的样式，但是在CSS2中，所有:before和:after伪元素的内容的样式都相同。
可能发生如下的情况：
这里是一个'run-in'标题，带有一个:after伪元素，后随一个段落带有一个:before伪元素。本例中所有的伪元素都是行内的（缺省）。如果样式表为：
H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }
并应用于该源文档：
<H3>Centaurs</H3> <P>have hoofs <P>have a tail
格式化的视觉效果为：
Centaurs: ... have hoofs ... have a tail
CSS2中，作者可以用一种与样式相关且与内容相关的方式指定用户端应该如何渲染引号。'quotes'属性指定了每一层嵌套引用的引号对。'content'属性给出了这些引号的引用，并使其在一个引用之前和之后被插入。
该属性指定了任意数量的嵌入引用的引号。取值的含义如下：
例如，使用如下的样式表：
/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "? "? "<" ">" }
/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after { content: close-quote }
以及如下的HTML片段：
<HTML lang="en">
<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>
会产生：
玊røndere gråter når <Vinsjan på kaia> blir deklamert.?
注意。尽管上例中由'quotes'属性指定的引号在计算机键盘上的位置是很让人舒服的，高质量的类型设置要求不同的ISO 10646字符。下面这个表格列出了一些ISO 10646的引号字符：
| 大致的渲染 | ISO 10646码（十六进制） | 描述 |
|---|---|---|
| " | 0022 | 引号（ASCII双引号） |
| ' | 0027 | 省略号（ASCII单引号） |
| < | 2039 | 左向单引号 |
| > | 203A | 右向单引号 |
| ?TD>00AB | 左向双引号 | |
| ?TD>00BB | 右向双引号 | |
| ` | 2018 | 左单引号 [single high-6] |
| ' | 2019 | 右单引号 [single high-9] |
| `` | 201C | 左双引号 [double high-6] |
| '' | 201D | 右双引号 [double high-9] |
| ,, | 201E | 双LOW-9引号 [double low-9] |
引号在恰当的位置插入到一个文档中，插入的是'content'属性的'open-quote'和'close-quote'值。基于嵌套的深度，每一个'open-quote'或'close-quote'的出现都相应地被'quotes'值中的一个字符串代替。
'Open-quote'引用引号对的第一部分，而'close-quote'引用第二部分。使用哪一对引号取决于引用的嵌套层次：当前'open-quote'之前出现在所有生成的文本中的'open-quote'次数，减去'close-quote'出现的次数。如果深度为0，使用第一对引号；如果深度为1，使用第二对，以此类推。如果深度大于引号对的数量，最后一对将重复使用。
注意，该嵌套深度与源文档的嵌套或格式化结构无关。
有些印刷样式要求在一个跨越数个段落的引用的每一段之前重复开引号，而只在最后一段以闭引号结束。在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'关键字，它不插入任何内容，但是将引号深度增加1。
注意。如果引用的文本语言和其周围的文本语言不同，习惯上用周围文本语言的引号来引用这些文本，而不是用引语语言的引号。
例如，英语中的法语：
The device of the order of the garter is “Honi soit qui mal y pense.”法语中的英语：
Il disait: ?nbsp;Il faut mettre l'action en ‹ fast forward ›.?
如下的一个样式表将设置'quotes'属性，使'open-quote'和'close-quote' 对于所有元素都能正常使用。这些规则适用于只包含英文，法文或其两者的文档。如果有额外的语言，就需要另一个规则。注意子结合子的应用（">"），它根据周围文本的语言来设置引号：
[LANG|=fr] > * { quotes: "? "? "\2039" "\203A" }
[LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }
这里显示的英文引号应该是大部分人可以打出的。如果你可以直接打出，它们看起来就会是这样：
[LANG|=fr] > * { quotes: "? "? "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }
CSS2中的自动记数由两个属性控制，'counter-increment'和'counter-reset'。这些属性定义的记数器和'content'属性的counter()和counters()函数联用。
| 值： | [ <identifier> <integer>? ]+ | none | inherit |
| 初始值： | none |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 所有 |
| 值： | [ <identifier> <integer>? ]+ | none | inherit |
| 初始值： | none |
| 适用于： | 所有元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 所有 |
'counter-increment'属性接受一个或多个记数器的名称（标识符），每一个之后可选地跟一个整数。这一整数指明记数器在该元素每次出现时的递增量。缺省的增量是1。零和负整数也是允许的。
'counter-reset'属性也包含一个或多个记数器名称的列表，每一个之后可选地跟一个证书。该整数指明该元素每次出现时记数器被设置的值。缺省为0。
如果'counter-increment'引用了一个记数器，而它不在任何'counter-reset'的范围中（参见下文），该记数器被认为由根元素设置为0。
下例显示了一种方法将章和节用"Chapter 1"，"1.1"，"1.2"等来标记：
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
如果一个元素增加/重置了一个记数器，并且使用它（在它的:before或:after伪元素的'content'属性中），该记数器在增加/重置之后再使用。
如果一个元素同时重置和增加一个记数器，记数器先被重置，然后增加。
'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 }
自我嵌套基于这样的准则，即：每一个元素如果有一个对于记数器X的'counter-reset'，将创建一个新的记数器X，其范围是该元素，它的前继同胞，以及所有该元素的派生和它的前继同胞。
在上例中，一个OL将产生一个记数器，而所有它的子元素将引用该记数器。
我们以item[n]表示"item"记数器的第n个实例，以"("和")"表示范围的开始和结束，则下面的HTML片段将使用如下指出的记数器。（我们假定样式表已在上例中给出。）
<OL> <!-- (设置item[0]为0 -->
<LI>item <!-- 增加item[0] (= 1) -->
<LI>item <!-- 增加item[0] (= 2) -->
<OL> <!-- (设置item[1]为0 -->
<LI>item <!-- 增加item[1] (= 1) -->
<LI>item <!-- 增加item[1] (= 2) -->
<LI>item <!-- 增加item[1] (= 3) -->
<OL> <!-- (设置item[2]为0 -->
<LI>item <!-- 增加item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (设置item[3]为0 -->
<LI> <!-- 增加item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- 增加item[1] (= 4) -->
</OL> <!-- ) -->
<LI>item <!-- 增加item[0] (= 3) -->
<LI>item <!-- 增加item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (重置item[4]为0 -->
<LI>item <!-- 增加item[4] (= 1) -->
<LI>item <!-- 增加item[4] (= 2) -->
</OL> <!-- ) -->
'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, hebrew) "]" }
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}
另一方面，元素的'visibility'设置为'hidden'，它还是增加记数值的。
大部分CSS中的块类元素生成一个原始的块框。本节中，我们讨论两种CSS机制使一个元素生成两个框：一个原始块框（包含元素的内容），一个独立的标记框（包含诸如符号，图形，数字的装饰）。标记框可能定位在原始框的内部或外部。与:before和:after内容不同，标记框不影响原始框的定位，而不管定位机制是什么。
这两个机制中比较通用的一个是CSS2中新的内容，称为标记。比较专用的机制牵涉到CSS1中的列表属性。列表属性对于大量常用的有序或无序的列表场合，给予作者一个快速的结果。不过标记给予用户在标记内容和位置方面精确的控制。标记可以和记数器来联用，以创建新的列表样式，边距注解的编号，等等等等。
例如，下面的例子展示了如何应用标记在每一个编号的列表项之后加入一个句点。HTML片段和样式表：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Creating a list with markers</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</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.
和派生选择子和子选择子联用，可以根据列表嵌套的深度来定义不同的标记类型。
标记的创建是通过设置:before或:after伪元素中的'display'属性为'marker'而实现的。尽管'block'和'inline'的:before和:after内容是该元素生成的原始框的一部分，'marker'的内容在一个独立的标记框中格式化，在原始框之外。标记框格式化为一个单行（即，一个线框），因此它们不如浮动那么灵活。标记框只有在该伪元素的'content'属性确实产生内容时，才被创建。
标记框有边白和边框，但是没有边距。
对于:before伪元素，标记框中文字的基线在垂直方向对齐原始框内容第一行文本的基线。如果原始框中没有文本，标记框的顶外边对齐原始框的顶外边。对于:after伪元素，标记框中文字的基线在垂直方向对齐原始框内容最后一行文本的基线。如果原始框中没有文本，标记框的底外边对齐原始框的底外边。
标记框的高度由'line-height'属性给出。:before（:after）标记框参与原始框的第一个（最后一个）线框高度的计算。因此，即使标记框存在于独立的线框中，标记和元素内容的第一行和最后一行对齐。如果原始框中不存在第一个或最后一个线框，标记框独立创建线框。
标记框在它的线框内的垂直对齐由'vertical-align'属性指定。
如果'width'属性的值为'auto'，标记框的内容宽度就是内容的宽度，否则它是'width'的值。如果'width'的值小于内容宽度，'overflow'属性指定了溢出的表现。标记框可能覆盖原始框。如果'width'值大于内容宽度，'text-align'属性决定内容在标记框中的水平对齐。
'marker-offset'属性指定了标记框和其相连的原始框之间的水平偏移。所衡量的是它们最靠近的边框边间的距离。注意。如果在左到右的格式化内容中，一个标记排列在一个浮动的右边，原始框将排列在浮动的右边，而标记框在出现在浮动的左边。由于原始框的左边框排在浮动的左边（参见浮动的描述），而标记框排在原始框边框边的外边，因此标记也将排在浮动的左边。相似的情况出现在右到左的格式化内容中，标记排列在浮动左边的场景。
对于一个设置了'display: list-item'的元素所生成的内容，如果'display'属性取值为'marker'，为':before'生成的标记框取代通常的列表项标记。
下例中，在一个固定宽度的标记框中，内容居中排列。下面的文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Content alignment in the marker box</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</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>
应该产生如下的效果：
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
下面的例子在列表项之前和之后生成标记。
该文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers before and after list items</TITLE>
<STYLE type="text/css">
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
应该产生如下的效果（这里用ASCII字符来代表图形文件）：
:-) first list item
comes first :-(
:-) second list item
comes second :-(
下面的例子用标记来编号注释（段落）。
下面的文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers to create numbered notes4>/TITLE>
<STYLE type="text/css">
P { margin-left: 12 em; }
@media screen, print {
P.Note:before {
display: marker;
content: url("note.gif")
"Note " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</STYLE>
</HEAD>
<BODY>
<P>This is the first paragraph in this document.</P>
<P CLASS="Note">This is a very short document.</P>
<P>This is the end.</P>
</BODY>
</HTML>
应该产生如下的效果：
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
| 值： | <length> | auto | inherit |
| 初始值： | auto |
| 适用于： | 设置了'display: marker'的元素 |
| 可否继承： | 否 |
| 百分比： | N/A |
| 媒介： | 图形 |
该属性指定了标记框的边框边和最靠近它的与之相连的原始框的边框边的距离。该偏移或者是用户指定的（<length>）或由用户端选择（'auto'）。长度可以是负数，但是可能有实现上的限制。
下面的例子展示了如何用标记在每一个编号的列表项之后加入一个句点。HTML片段和样式表如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Marker example 5</TITLE>
<STYLE type="text/css">
P { margin-left: 8em } /* Make space for counters */
LI:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<P> This is a long preceding paragraph ...
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
<P> This is a long following paragraph ...
</BODY>
</HTML>
应该产生如下的效果：
This is a long preceding
paragraph ...
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
This is a long following
paragraph ...
列表属性允许列表的基本可视格式化。对于更一般的标记，元素设置了'display: list-item'，将生成一个原始框来包含元素的内容，以及一个可选的标记框。其它列表属性允许作者指定标记类型（图形，字形或数字）以及它们相对原始框的位置（在框之外或框之内，内容之前）。它们不允许作者为列表标记指定个别的样式（颜色，字体，对齐等），也不允许相对原始框而调整它的位置。
另外，如果一个标记M（用'display: marker'创建）用在一个由列表属性创建的列表项，M替代了标准的列表项标记。
对于列表属性，背景属性只适用于原始框；一个'outside'的标记框是透明的。标记提供了标记框样式更多的控制。
| 值： | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit |
| 初始值： | disc |
| 适用于： | 设置了'display: list-item'的元素 |
| 可否继承： | 可 |
| 百分比： | N/A |
| 媒介： | 图形 |
如果'list-style-image'为'none'或由该URI指向的图形无法被显示时，该属性指定了列表项标记的呈现。'none'指定没有标记，否则有三种类型的标记：字形，数字系统和字母系统。注意。通过使列表的导航更容易，标号的列表改进了文档的可阅读性 。
字形由disc，circle和square指定。它们确切的渲染取决于用户端。
数字系统的指定如下：
如果用户端无法识别一个数字系统，它应该使用'decimal'。
注意。本文档并不规定每一个数字系统的确切机制（如，罗马数字如何计算）。以后的W3C注解可能提供更详细的声明。
字母系统的指定如下：
本规范并不定义字母系统在字母表之后如何回绕。例如，26个列表项之后，'lower-latin'的渲染未被定义。因此，对于长的列表，我们推荐作者指定真实的数字。
例如，如下的HTML文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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.
注意，列表标记的对齐（在这里是右对齐）取决于用户端。
注意。以后版本的CSS可能提供更多完整的机制来包括国际数字编码系统。
| 值： | <uri> | none | inherit |
| 初始值： | none |
| 适用于： | 带有'display: list-item'的元素 |
| 可否继承： | 可 |
| 百分比： | N/A |
| 媒介： | 图形 |
该属性指定用来列表项标记的图形。如果图形是可以得到的，它将替换由'list-style-type'标记设置的标记。
下面的这个例子将每一个列表项开头的标记设置为图形"ellipse.png"。
UL { list-style-image: url("http://png.com/ellipse.png") }
| 值： | inside | outside | inherit |
| 初始值： | outside |
| 适用于： | 带有'display: list-item'的元素 |
| 可否继承： | 可 |
| 百分比： | 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-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
| 初始值： | 对于缩写属性未定义 |
| 适用于： | 带有'display: list-item'的元素 |
| 可否继承： | 可 |
| 百分比： | N/A |
| 媒介： | 图形 |
'list-style'属性是一个缩写的属性，用来在样式表的同一处一次性设置三个属性（'list-style-type'，'list-style-image'和'list-style-position'）。
UL { list-style: upper-roman inside } /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */
虽然作者可以在列表项元素（如，HTML中的LI）上直接指定指定'list-style'信息，他们这样做时要小心。下面的规则看上去很相象，但是第一个声明了一个派生选择子而第二个声明了一个更有针对性的子选择子。
OL.alpha LI { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
如果作者只使用派生选择子，可能达不到他们希望的效果。考虑如下的例子：
<HTML>
<HEAD>
<TITLE>WARNING: Unexpected results due to cascade</TITLE>
<STYLE type="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>level 1
<UL>
<LI>level 2
</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 }
继承将OL和UL元素的'list-style'值转移到LI元素。这是指定列表样式信息的推荐方法。
一个URI值可以和其它值联用，如：
UL { list-style: url("http://png.com/ellipse.png") disc }
上例中，如果无法获取图形，将使用'disc'。
如果'list-style'属性取值为'none'，它将'list-style-type'和'list-style-image'都设置为'none'：
UL { list-style: none }
结果是不显示任何列表项标记。