信息: 列表

如果你完成了上一節的挑戰任務，你就知道如何在列表項前面插入內容。

CSS為列表提供了專門的屬性。如果可以，使用這些屬性通常會比較方便。

使用list-style 屬性來指定列表項標記的樣式。

你的CSS中的選擇器可以選中列表項 (比如, ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li))。也可以選中列表項的父節點 (比如, [)。此時列表項會繼承父節點的樣式。

無序列表

無序列表的每個列表項都用同樣的方式標記。

CSS 有三種標記樣式：

你可以指定一個圖片的URL來自定義標記樣式。

例

下面的規則為不同類的列表項指定了不同的標記：

這些類被用于列表項時，用以區分打開和關閉的列表項 (比如，在一個待辦事項列表中)：

結果：

有序列表

在有序列表中，每個列表項都被標記了不同的序號。

用list-style 屬性指定標記樣式：

例

這條規則指定類名包含info的“ 元素的列表項用大寫字母標序

li 元素繼承了ol的樣式：

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

更多細節

list-style 屬性是一個快捷寫法。在復雜的樣式表中你可能更希望用單獨的屬性設置不同的屬性值。欲查看這些單獨的屬性和更詳細的CSS指定列表的方法，見 list-style參考頁。

如果你使用如HTML這類提供了方便的無序列表 (<ul>) 和有序列表(ol)的標記語言，就盡量使用這些標簽。當然，你完全可以將 ul 顯示成有序列表，將 ol 顯示成無序列表。

瀏覽器實現列表樣式略有不同。不要奢望樣式表可以讓列表在所有瀏覽器中顯示的完全一樣。

計數器

注意:  一些瀏覽器不支持計數器。Quirks Mode site 的CSS contents and browser compatibility 頁有更多這方面的兼容表格可以參考。 CSS Reference 也有瀏覽器兼容性表格。

你可以用計數器來計數任何元素，不僅是列表元素。比如，在某些文檔中你可能想計數標題和段落。

要想計數，你必須定義一個計數器。

在計數開始前的某個元素上，設置 counter-reset屬性以重置計數器。被計數元素的父節點是一個不錯的選擇。當然，任何出現在被計數元素前面的元素都可以。

設置每個需要計數的元素的counter-increment 屬性為你的計數器名。

通過為選擇器增加 :before 或 :after 并設置 content 屬性來顯示計數器。 (如上一節所示, 內容).

在content屬性的值中設置 counter(),在括號內填上計數器的名字?？蛇x的是設置計數器類型。其類型和前面一節 有序列表 中相同。

正常情況下，顯示計數器的元素也會遞增計數器。

例

這條規則會為每個類名中包含numbered的“ 元素初始化計數器 mynum：

這條規則為每個類名包含numbered的“元素顯示并遞增計數器：

結果：

Heading

**1: **Lorem ipsum

**2: **Dolor sit

**3: **Amet consectetuer

**4: **Magna aliquam

**5: **Autem veleum

更多細節

除非所有看你文檔的人的瀏覽器都支持計數器，否則你不能使用計數器。

如果你可以使用計數器，那么你可以單獨設置計數器的樣式。如上面例子所示：計數器是粗體，但列表不是。

你還可以用更復雜的方式使用計數器。比如，計數章節, 標題, 子標題以及段落。詳見CSS規范中的 Automatic counters and numbering 。

實例: 設計列表樣式

新建doc2.html：

新建style2.css：

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

在瀏覽器中打開。如果你的瀏覽器支持計數器，你將看到下面的樣子。如果不支持，你將看不到數字序號。 (甚至冒號都看不到)：

The oceans

Numbered paragraphs

**1: **Lorem ipsum

**2: **Dolor sit

**3: **Amet consectetuer

**4: **Magna aliquam

**5: **Autem veleum