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

Answer 2

尝试使用子选择器>而不是空格。

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 3

选择器之间的空格将获得其下方的所有匹配元素，无论树中有多远，因此您的ol li选择器将选择所有 li元素，这三个级别。

使用>选择器获取直接子女。

您还需要将它们固定在顶层的某个位置，例如div。

这应该适合你：

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

Answer 4

HTML中存在错误。下面是一个更好的方法的例子。

<ol>
  <li>Ordered List Style
  <ol>
   <li>First nest
   <li>First nest
    <ol>
     <li>Second nest
     <li>Second nest
      <ol>
         <li>Inline
         <ol>
           <li>More nests
         </ol>
      </ol>
    </ol>
   </ol>
</ol>

看起来像这样：

  

1. 有序列表样式
   1. 第一个嵌套
   2. 首先   巢       
             
      1. 第二窝        
      2. 第二个巢         
                    
         1. 内联            
                         
            1. 更多巢穴