这个问题在这里已有答案:
我正在尝试制作一个无序和有序的混合列表,如下例所示:
验证器给了我这个错误:
错误:在此上下文中,元素“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好
这是更新的小提琴:
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>
你不能使用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>