0

我有这个 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; }
4

4 回答 4

5

你的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>
于 2013-08-29T14:40:36.867 回答
1

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

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; }
于 2013-08-29T14:42:16.903 回答
0

选择器之间的空间将获得其下方的所有匹配元素，无论在树中有多远，因此您的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; }
于 2013-08-29T14:43:02.957 回答
0

您的 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. 更多的巢
于 2013-08-29T14:52:07.003 回答