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

1

typeCSS がデフォルトの番号付けを置き換えるため、属性は効果がありません。これを回避する 1 つの方法は、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 に答える
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 に答える