html - 定位 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>