定位ol li ol li ol li,用css嵌套列表

Question

我有这个HTML

<div class="multiple">
<ol>
    <li>Ordered List Style</li>
    <li>Here’s another, they shouldn’t be too terribly long, but might wrap a line or three
    <ol>
        <li>nested</li>
        <li>nested</li>
          <ol>
             <li>nested</li>
             <li>nested</li>
          </ol>
    </ol>
    </li>
    <li>Let’s talk about the benefits of this here product!</li>
    <li>More feature talk! This thing is super useful, you should totally buy it!</li>
</ol>

<ol>
    <li>Ordered List Style</li>
    <li>Here’s another, they shouldn’t be too terribly long, but might wrap a line</li>
    <li>Let’s talk about the benefits of this here product!</li>
</ol>

和下面的CSS,我似乎无法定位任何低于ol li ol li的东西,我的ol li ol li样式应用于它下面的所有嵌套列表.下面显示的最后一条规则永远不会应用

ol li { list-style-type: upper-roman; }
ol li ol li { list-style-type: upper-alpha; }
ol li ol li ol li { list-style-type: decimal; }

Answer 1

你的HTML很糟糕,你需要把ol放进去 <li>

<ol>
    <li>Ordered List Style</li>
    <li>Here’s another, they shouldn’t be too terribly long, but might wrap a line or three
    <ol>
        <li>nested</li>
        <li>nested
          <ol>
             <li>nested</li>
             <li>nested</li>
          </ol>
        </li>
    </ol>
    </li>
    <li>Let’s talk about the benefits of this here product!</li>
    <li>More feature talk! This thing is super useful, you should totally buy it!</li>
</ol>