CSS 列表与计数器模块第 3 级

<style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
<ol>
  <li>This is the first item.
  <li>This is the second item.
  <li>This is the third item.
</ol>

它应产生类似于以下的效果

  (i) This is the first item.
 (ii) This is the second item.
(iii) This is the third item.

注意： 请注意，此示例在 HTML 中比通常需要的要繁琐得多，因为 UA 的默认样式表已经处理了大部分必要的样式。

<style>
p { margin-left: 12 em; }
p.note {
  display: list-item;
  counter-increment: note-counter;
}
p.note::marker {
  content: "Note " counter(note-counter) ":";
}
</style>
<p>This is the first paragraph in this document.
<p class="note">This is a very short document.
<p>This is the end.

它应渲染出类似于以下的效果

        This is the first paragraph
        in this document.

Note 1: This is a very short
        document.

        This is the end.

<style>
p { margin-left: 8em } /* Make space for counters */
li { list-style-type: lower-roman; }
li::marker { color: blue; font-weight:bold; }
</style>
<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 ...

前面的文档应渲染出类似于以下的效果

       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 ...

以前，设置标记样式的唯一方法是通过继承；用户必须在列表项上放置所需的标记样式，然后在列表项实际内容的包装元素上还原该样式。

• white-space, text-transform, letter-spacing (参见 [CSS-TEXT-3])
• 所有字体属性（参见 [CSS-FONTS-3] 及其后继版本）
• color 属性（参见 [CSS-COLOR-3]）

li { list-style-image: url("http://www.example.com/ellipse.png") }

ul { list-style-type: "★"; }
/* Sets the marker to a "star" character */

p.note {
  display: list-item;
  list-style-type: "Note: ";
  list-style-position: inside;
}
/* Gives note paragraphs a marker consisting of the string "Note: " */

ol { list-style-type: upper-roman; }
/* Sets all ordered lists to use the upper-roman counter-style
   (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]]) */

ul { list-style-type: symbols(cyclic '○' '●'); }
/* Sets all unordered list items to alternate between empty and
   filled circles for their markers. */

ul { list-style-type: none; }
/* Suppresses the marker entirely, unless list-style-image is specified
   with a valid image. */

<style>
  ul.compact { list-style: inside; }
  ul         { list-style: outside; }
</style>
<ul class=compact>
  <li>first "inside" list item comes first</li>
  <li>second "inside" list item comes first</li>
</ul>
<hr>
<ul>
  <li>first "outside" list item comes first</li>
  <li>second "outside" list item comes first</li>
</ul>

上述示例可以格式化为

  * first "inside" list
  item comes first
  * second "inside" list
  item comes second

========================

* first "outside" list
  item comes first
* second "outside" list
  item comes second

ul { list-style: upper-roman inside }  /* Any UL */
ul ul { list-style: circle outside } /* Any UL child of a UL */

list-style: none disc;
/* Sets the image to "none" and the type to "disc". */

list-style: none url(bullet.png);
/* Sets the image to "url(bullet.png)" and the type to "none". */

list-style: none;
/* Sets both image and type to "none". */

list-style: none disc url(bullet.png);
/* Syntax error */

ol.alpha li { list-style: lower-alpha; }
ul li       { list-style: disc; }

上述做法不会按预期工作。如果你在 ol class=alpha 中嵌套了一个 ul，第一个规则的特指度 (specificity) 将使 ul 的列表项使用 lower-alpha 样式。

ol.alpha > li { list-style: lower-alpha; }
ul > li       { list-style: disc; }

这些按预期工作。

ol.alpha { list-style: lower-alpha; }
ul       { list-style: disc; }

这些更好，因为继承会将 list-style 值传递给列表项。

内带有不同“dir”属性的多个
1. ），有时将所有标记对齐在同一侧会更有用，这样作者可以在该侧指定单一的“槽 (gutter)”，并确保所有标记都位于该槽中并且可见。

   以下两个渲染示例均由相同的 HTML 生成，唯一的区别是列表上 marker-side 的值

   <ul>
     <li>english one
     <li dir=rtl>OWT WERBEH
     <li>english three
     <li dir=rtl>RUOF WERBEH
   </ul>
   

   match-self	match-parent
   * english one OWT WERBEH * * english three RUOF WERBEH *	* english one * OWT WERBEH * english three * RUOF WERBEH

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

将仅重置 imagenum。要重置两个计数器，必须将它们一起指定

H1 { counter-reset: section -1 imagenum 99 }

同样的原则也适用于 counter-set 和 counter-increment 属性。请参阅 [css-cascade-4]。

以下示例展示了如何使用 “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;
}

ol { counter-reset: item }
li { display: block }
li::before { content: counter(item) ". "; counter-increment: item }

在此示例中，ol 将创建一个计数器，并且该 ol 的所有子元素都将引用该计数器。

如果我们用 item_n 表示 item 计数器的第 n 个实例，那么以下 HTML 片段将使用所指示的计数器。

<ul style='counter-reset: example 0;'>
  <li id='foo' style='counter-increment: example;'>
    foo
    <div id='bar' style='counter-increment: example;'>bar</div>
  </li>
  <li id='baz'>
    baz
  </li>
</ul>

回想一下，树序将文档树转换为有序列表，其中元素出现在其子元素之前，而子元素出现在其下一个兄弟元素之前。换句话说，对于像 HTML 这样的语言，它是解析器在读取文档时遇到开始标签的顺序。

在这里，ul 元素建立了一个名为 example 的新计数器，并将其值设置为 0。作为 ul 的第一个子元素，#foo 元素继承了此计数器。其父元素也是其在树序中紧邻的前一个元素，因此它随之继承了值 0，然后立即将该值递增为 1。

#bar 元素也是如此。它从 #foo 继承了 example 计数器，同时也从其继承了值 1 并将其递增为 2。

然而，#baz 元素略有不同。它从其前一个兄弟元素 #foo 继承了 example 计数器。但是，它并没有随计数器一起从 #foo 继承值 1，而是从树序中的前一个元素 #bar 继承了值 2。

这种行为允许在整个文档中使用单个计数器，持续递增，而作者无需担心文档的嵌套结构。

h2 { counter-increment: count2; }
h2.secret { display: none; }

然而，由于如果 列表项 的 counter-increment 显式提到了 list-item 计数器，则自动的 list-item 递增不会发生，因此 li { counter-increment: list-item 2; } 会按规定将 list-item 增加 2，而不是像无条件追加 list-item 1 那样增加 3。

这也允许通过显式覆盖来关闭自动的 list-item 计数器递增，例如 counter-increment: list-item 0;。

在以下示例中，列表被修改为以二为单位进行计数

ol.evens > li { counter-increment: list-item 2; }

一个三项列表将被渲染为

2. First Item
4. Second Item
6. Third Item

ol > li::marker { content: counters(list-item,'.') '.'; }

使用此规则的嵌套列表将被渲染为

1. First top-level item
5. Second top-level item, value=5
   5.3. First second-level item, list start=3
   5.4. Second second-level item, list start=3
        5.4.4. First third-level item in reversed list
        5.4.3. Second third-level item in reversed list
        5.4.2. Third third-level item in reversed list
        5.4.1. Fourth third-level item in reversed list
   5.5. Third second-level item, list start=3
6. Third top-level item

给定如下标记

<ol>
  <li>First top-level item
  <li value=5>Second top-level item, value=5
    <ol start=3>
      <li>First second-level item, list start=3
      <li>Second second-level item, list start=3
        <ol reversed>
          <li>First third-level item in reversed list
          <li>Second third-level item in reversed list
          <li>Third third-level item in reversed list
          <li>Fourth third-level item in reversed list
        </ol>
    </ol>
  <li>Third second-level item, list start=3
  <li>Third top-level item
</ol>

H1::before        { content: counter(chno, upper-latin) ". " }
/* Generates headings like "A. A History of Discontent" */

H2::before        { content: counter(section, upper-roman) " - " }
/* Generates headings like "II - The Discontent Part" */

BLOCKQUOTE::after { content: " [" counter(bq, decimal) "]" }
/* Generates blockquotes that end like "... [3]" */

DIV.note::before  { content: counter(notecntr, disc) " " }
/* Simply generates a bullet before every div.note */

P::before         { content: counter(p, none) }
/* inserts nothing */

<ul>
  <li>one</li>
  <li>two
    <ul>
      <li>nested one</li>
      <li>nested two</li>
    </ul>
  </li>
  <li>three</li>
</ul>
<style>
li::marker { content: '(' counters(list-item,'.') ') '; }
</style>

前面的文档应渲染出类似于以下的效果

(1) one
(2) two
   (2.1) nested one
   (2.2) nested two
(3) three

<h1>First H1</h1>
...
<h2>First H2 in H1</h2>
...
<h2>Second H2 in H1</h2>
...
<h3>First H3 in H2</h3>
...
<h1>Second H1</h1>
...
<h2>First H2 in H1</h2>
...
<style>
body { counter-reset: h1 h2 h3; }
h1   { counter-increment: h1; counter-reset: h2 h3;}
h2   { counter-increment: h2; counter-reset:    h3; }
h3   { counter-increment: h3; }
h1::before { content: counter(h1,upper-alpha) ' '; }
h2::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) ' '; }
h3::before { content: counter(h1,upper-alpha) '.'
                      counter(h2,decimal) '.'
                      counter(h3,lower-roman) ' '; }
</style>

前面的文档应渲染出类似于以下的效果

A First H1
...
A.1 First H2 in H1
...
A.2 Second H2 in H1
...
A.2.i First H3 in H2
...
B Second H1
...
B.1 First H2 in H1
...