在内置的有序列表中使用自定义有序列表

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>