在內置的有序列表中使用自定義有序列表

Question

我用upper-alpha制成了一個有序列表，然后是一個自定義列表，在數字后加了一個括號。 然后，我想使用list-style-type: lower-roman制作一個子list-style-type: lower-roman但是不起作用。 有沒有辦法阻止雙重上市？ 創建我的lower-roman自定義列表看起來不太好。

僅當我使用內置列表，然后是自定義列表，然后再使用內置列表時，似乎才出現問題。

以下CSS不起作用：

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol{
    list-style-type: lower-roman;
}

但是，自定義的lower-roman似乎將roman對齊到左側，而不是像list-style-type:lower-roman那樣將其對齊：

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol {
    list-style-type: none;
    counter-reset: roman;
}
ol.listing li ol li ol> li:before {
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

示例HTML代碼進行測試：

<ol class="listing">
    <li>Beverage
        <ol>
            <li>Cold Beverage
                <ol>
                    <li>Apple Juice</li>
                    <li>Sky Juice</li>
                    <li>Milk</li>
                </ol>
            </li>
            <li>Hot Beverage
                <ol>
                    <li>Coffee</li>
                    <li>Tea</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Food</li>
</ol>

Answer 1

您需要增加插入計數器的選擇器的特異性

ol.listing> li >ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}

 ol.listing { list-style-type: upper-alpha; } ol.listing li ol { list-style-type: none; counter-reset: list; } ol.listing> li >ol > li:before { counter-increment: list; content: counter(list)") " } ol.listing li ol li ol{ list-style-type: lower-roman; } 

 <ol class="listing"> <li>Beverage <ol> <li>Cold Beverage <ol> <li>Apple Juice</li> <li>Sky Juice</li> <li>Milk</li> </ol> </li> <li>Hot Beverage <ol> <li>Coffee</li> <li>Tea</li> </ol> </li> </ol> </li> <li>Food</li> </ol> 

或調整偽大小並重置文本對齊：

ol.listing li ol li ol> li:before {
  width: 1.5em;/* size*/
  text-align: right;/* reset */
  display: inline-block;/* make it a box sizeable */
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

 ol.listing { list-style-type: upper-alpha; } ol.listing li ol { list-style-type: none; counter-reset: list; } ol.listing li ol > li:before { counter-increment: list; content: counter(list)") " } ol.listing li ol li ol { list-style-type: none; counter-reset: roman; } ol.listing li ol li ol> li:before { width: 1.5em; text-align: right; display: inline-block; counter-increment: roman; content: counter(roman, lower-roman)". " } 

 <ol class="listing"> <li>Beverage <ol> <li>Cold Beverage <ol> <li>Apple Juice</li> <li>Sky Juice</li> <li>Milk</li> </ol> </li> <li>Hot Beverage <ol> <li>Coffee</li> <li>Tea</li> </ol> </li> </ol> </li> <li>Food</li> </ol>