“在这种情况下，<ul>不能作为元素<ol>的子元素”

Question

我正尝试按照以下示例创建一个无序和有序的混合列表：

验证器给我这个错误：

  

错误：在这种情况下，元素“ ul”不允许作为元素“ ol”的子代。

这是我的代码：

ol.numberlist{
   list-style-type: decimal;
}

ul.sqaredotlist{
    list-style-type:square;
}

ol.romanlist{
    list-style-type:lower-roman;
}

       <ol class="numberlist">
            <li>An numbered list</li>
            <li>Containing</li>
               
                <ul class="sqaredotlist">
                    <li>A dotted list</li>
                    <li>Containing</li>
                        
                        <ol class="romanlist">
                            <li>A roman numeral list</li>
                            <li>And some items</li>
                            <li>Like this</li>
                        </ol>
                
                    <li>And some items</li>
                    <li>Like this</li>
               </ul>
            
            <li>And some items</li>
            <li>Like this</li>
        </ol>

它实际上可以在浏览器上运行，但是我想找出修复它的方法。

任何帮助将不胜感激。

银浩

Answer 1

自permitted element is zero or more li起，您不能将ul用作ol的直接子代，反之亦然。要使其有效，您必须创建一个新的li（这将分配新的数字或图标），或附加上一个li元素（这不会破坏您当前的样式）。

ol.numberlist {
  list-style-type: decimal;
}

ul.sqaredotlist {
  list-style-type: square;
}

ol.romanlist {
  list-style-type: lower-roman;
}

<ol class="numberlist">
  <li>An numbered list</li>
  <li>Containing

    <ul class="sqaredotlist">
      <li>A dotted list</li>
      <li>Containing

        <ol class="romanlist">
          <li>A roman numeral list</li>
          <li>And some items</li>
          <li>Like this</li>
        </ol>
      </li>
      <li>And some items</li>
      <li>Like this</li>
    </ul>
  </li>
  <li>And some items</li>
  <li>Like this</li>
</ol>

Answer 2

这是更新的小提琴：

ol.numberlist {
  list-style-type: decimal;
}

ul.sqaredotlist {
  list-style-type: square;
}

ol.romanlist {
  list-style-type: lower-roman;
}

.none {
  list-style-type: none;
}

<ol class="numberlist">
  <li>An numbered list</li>
  <li>Containing</li>
  <li class="none">
    <ul class="sqaredotlist">
      <li>A dotted list</li>
      <li>Containing</li>
      <li class="none">
        <ol class="romanlist">
          <li>A roman numeral list</li>
          <li>And some items</li>
          <li>Like this</li>
        </ol>
      </li>
      <li>And some items</li>
      <li>Like this</li>
    </ul>
  </li>
  <li>And some items</li>
  <li>Like this</li>
</ol>