定位ol li ol li ol li，使用CSS嵌套列表

Question

I have this 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>

and the below css, I can not seem to target anything below ol li ol li, my styles for ol li ol li get applied to all nested lists under it. The last rule shown below never gets applied

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

Your html is bad, you need to put the ol in the <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

Try to use child selector > instead of space.

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

A space between selectors will get all matching elements below it, no matter how far down in the tree, so your ol li selector will select all li elements, at all three levels.

Use the > selector to get direct children.

You also need to anchor them to something at the top level, say a div .

This should work for you:

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

There is a fault in your HTML. Below is an example of a better way.

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

It will look like this:

1. Ordered List Style
   1. First nest
   2. First nest
      1. Second nest
      2. Second nest
         1. Inline
            1. More nests