“ is not allowed as a child of element in this context” [duplicate]

Question

这个问题在这里已有答案：

• Proper way to make HTML nested list? 7个答案
• Can not have an ul inside an ol in html 4个答案

我正在尝试制作一个无序和有序的混合列表，如下例所示：

验证器给了我这个错误：

错误：在此上下文中，元素“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>

它实际上适用于浏览器，但我想弄清楚修复它的方法。

任何帮助将不胜感激。

yin好

Answer 1

这是更新的小提琴：

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>

Answer 2

你不能使用ul作为ol的直接孩子，反之亦然，因为permitted element is zero or more li。要使其有效，您必须创建一个新的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>