2

很简单，我想要一个有序列表像这样工作：

 1. Foo
 2. Bar
3a. Baz
3b. Qux
 4. Etc...

有什么方法可以轻松地在 HTML 中按照这些方式做一些事情吗？

4

2 回答 2

5

鉴于以下标记：

<ol>
    <li>Foo</li>
    <li>
        <ol>
           <li>bar</li>
           <li>baz</li>
        </ol>
    </li>
    <li>Something else...</li>
</ol>​

下面的 CSS几乎可以工作：

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS 小提琴演示。

到目前为止，唯一的问题是它包含topLevel对内部li元素（如您所愿）和外部li（包含那些内部元素）的计数，所以......还没有。

并且上述问题解决了！...在那些支持 CSS:not()选择器的浏览器中：

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before,
ol li.hasChild ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS 小提琴演示。

我（最初）忘记了要注意，要使其正常工作（因为CSS 还没有父选择器（到目前为止），我必须向li具有子元素的那些元素添加一个特定的类ol，以便适当地隐藏数字的重复。在这种情况下，我选择了类名.hasChild（如 Fiddle 所示）。

顺便说一句，对规则的一个小改动li:not(.hasChild)::before，允许右对齐的文本：

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    width: 2em;
    margin-right: 0.3em;
    display: inline-block;
    text-align: right;
}

JS 小提琴演示。

于 2012-09-07T21:45:00.873 回答
1

它不能完全满足您的要求，并且需要对您的 html 进行一些（烦人的）更改，但我认为它与您将得到的差不多。

http://jsfiddle.net/qGCUk/30/

<ol>
    <li>one</li>
    <li class="has_children">
        <ol>
           <li>two.one</li>
           <li>two.two</li>
           <li>two.three</li>
        </ol>
    </li>
</ol>

ol,li{
   padding:0;
   margin:0;    
}
ol { counter-reset: item }
li { display: block; padding-left: 0 }
li:before { 
    content: counters(item, ".") " "; 
    counter-increment: item 
}
LI.has_children:before { 
    content: " "; 
    counter-increment: item 
}

这只是数字，因为我认为您不能混合数字和字母。而且由于没有选择器可以选择并且li其中包含 and ol，因此您必须将一个类添加到任何li具有 child的类ol。

于 2012-09-07T21:27:47.517 回答