列表

信息: 列表

如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。

CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。

使用list-style属性来指定列表项标记的样式。

你的CSS中的选择器可以选中列表项 (比如,](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li))。也可以选中列表项的父节点 (比如,[)。此时列表项会继承父节点的样式。

无序列表

无序列表的每个列表项都用同样的方式标记。

CSS 有三种标记样式：

你可以指定一个图片的URL来自定义标记样式。

例

下面的规则为不同类的列表项指定了不同的标记：

li.open {list-style: circle;}
li.closed {list-style: disc;}

这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：

• Lorem ipsum
• Dolor sit
• Amet consectetuer
• Magna aliquam
• Autem veleum

结果：

Lorem ipsum Dolor sit Amet consectetuer Magna aliquam Autem veleum

有序列表

在有序列表中，每个列表项都被标记了不同的序号。

用list-style属性指定标记样式：

例

这条规则指定类名包含info的“元素的列表项用大写字母标序

ol.info {list-style: upper-latin;}

li元素继承了ol的样式：

A. Lorem ipsum
B. Dolor sit
C. Amet consectetuer
D. Magna aliquam
E. Autem veleum

更多细节

list-style属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见list-style参考页。

如果你使用如HTML这类提供了方便的无序列表(

• ) 和有序列表(ol)的标记语言，就尽量使用这些标签。当然，你完全可以将ul显示成有序列表，将ol显示成无序列表。

   

  浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。

计数器

注意:一些浏览器不支持计数器。Quirks Mode site的CSScontents and browser compatibility页有更多这方面的兼容表格可以参考。CSSReference也有浏览器兼容性表格。

你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

要想计数，你必须定义一个计数器。

在计数开始前的某个元素上，设置counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

设置每个需要计数的元素的counter-increment属性为你的计数器名。

通过为选择器增加:before或:after并设置content属性来显示计数器。 (如上一节所示,内容).

在content属性的值中设置counter(),在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节有序列表中相同。

正常情况下，显示计数器的元素也会递增计数器。

例

这条规则会为每个类名中包含numbered的“元素初始化计数器 mynum：

h3.numbered {counter-reset: mynum;}

这条规则为每个类名包含numbered的“元素显示并递增计数器：

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;}

结果：

Heading

**1:**Lorem ipsum

**2:**Dolor sit

**3:**Amet consectetuer

**4:**Magna aliquam

**5:**Autem veleum

更多细节

除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。

如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。

你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的Automatic counters and numbering。

实例: 设计列表样式

新建doc2.html：

The oceans

• Arctic
• Atlantic
• Pacific
• Indian
• Southern

Numbered paragraphs

Lorem ipsum

Dolor sit

Amet consectetuer

Magna aliquam

Autem veleum

新建style2.css：

/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}

如果布局和注释不符合你的口味，随便改。

在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：

The oceans

Numbered paragraphs

**1:**Lorem ipsum

**2:**Dolor sit

**3:**Amet consectetuer

**4:**Magna aliquam

**5:**Autem veleum