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

问题描述 投票:1回答:2

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

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

验证器给了我这个错误:

错误:在此上下文中,元素“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好

html css html5 tags html-lists
2个回答
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>

1
投票

你不能使用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>
© www.soinside.com 2019 - 2024. All rights reserved.