3

我需要帮助来获得a., b.样式内部缩进而不是2.2.1., 2.2.2.. 从 HTML 有序列表缩进中找到原始 CSS 代码以保留原始编号

我的代码：

<style>
    ol { counter-reset: item }
    li { display: block }
    li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>

<ol>
    <li>One</li>
    <li>
        Two
        <ol>
            <li>Two one</li>
            <li>
                Two two
                <ol type="a">
                    <li>Two two a</li>
                    <li>Two two b</li>
                </ol>
            </li>
            <li>Two three</li>
        </ol>
    </li>
    <li>Three</li>
</ol>

我得到了什么：

1. One
2. Two
   2.1. Two one
   2.2. Two two
      2.2.1. Two two a
      2.2.2. Two two b
   2.3. Two three
3. Three

我需要的：

1. One
2. Two
   2.1. Two one
   2.2. Two two
      a. Two two a
      b. Two two b
   2.3. Two three
3. Three
4

3 回答 3

3

由于您不需要在内部列表前面加上部分编号，因此您可以添加一个附加规则counter来获取字母：

ol {
    counter-reset: item;
}
li {
    list-style: none;
}
li:before {
    content: counters(item, ".")". ";
    counter-increment: item
}
ol ol ol li:before {
    content: counter(item, lower-alpha)". ";
}

详情：http: //jsfiddle.net/kmAJ6/3/。应该适用于您现有的 HTML。

于 2013-07-31T19:59:05.467 回答
1

我懂了：

<style>
ol.cnt { counter-reset: item }
ol.cnt > li { display: block }
ol.cnt > li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>

html:

<ol class="cnt">
    <li>One</li>
    <li>
        Two
        <ol class="cnt">
            <li>Two one</li>
            <li>
                Two two

                <ol type="a">
                    <li>Two two a</li>
                    <li>Two two b</li>
                </ol>

            </li>
            <li>Two three</li>
        </ol>
    </li>
    <li>Three</li>
</ol>

有点乱，但似乎工作。

于 2013-07-31T17:01:44.257 回答
1

您的type属性无效，因为您的 css 替换了默认编号。解决此问题的一种方法是将您的 css 规则更新为仅针对前 2 个级别，并让第 3 级使用默认编号。这将使您的type属性生效。

http://jsfiddle.net/TbjcV/

.level1,
.level2{ 
    counter-reset: item 
}

.level1 > li,
.level2 > li{ 
    display: block 
}
.level1 > li:before,
.level2 > li:before{ 
    content: counters(item, ".") ". "; 
    counter-increment: item 
}

<ol class="level1">
    <li>One</li>
    <li>
        Two
        <ol class="level2">
            <li>Two one</li>
            <li>
                Two two
                <ol type="a" class="level3">
                    <li type="a">Two two a</li>
                    <li>Two two b</li>
                </ol>
            </li>
            <li>Two three</li>
        </ol>
    </li>
    <li>Three</li>
</ol>
于 2013-07-31T16:59:51.100 回答