[英]Reset HTML List Depth To Root Level (for bullets)
As an example, I would like to set level 4 of the list in this fiddle (code below) to the root level. 作为一个例子,我想将这个小提琴 (下面的代码)中的列表级别4设置为根级别。 This would mean the bullets for level 4 would look like level 1, level 5 would look like level 2 and level 6 would look like level 3. This would need to happen without manually overriding the bullets per item because different browsers have different bullet styles.
这意味着等级4的子弹看起来像等级1,等级5看起来像等级2,等级6看起来像等级3.这需要在没有手动覆盖每个物品的子弹的情况下发生,因为不同的浏览器具有不同的子弹样式。
<ul>
<li>level 1 item</li>
<li>level 1 item
<ul>
<li>level 2 item</li>
<li>level 2 item
<ul>
<li>level 3 item</li>
<li>level 3 item
<ul>
<li>level 4 item</li>
<li>level 4 item
<ul>
<li>level 5 item</li>
<li>level 5 item
<ul>
<li>level 6 item</li>
<li>level 6 item</li>
<li>level 6 item</li>
</ul>
</li>
<li>level 5 item</li>
</ul>
</li>
<li>level 4 item</li>
</ul>
</li>
<li>level 3 item</li>
</ul>
</li>
<li>level 2 item</li>
</ul>
</li>
<li>level 1 item</li>
</ul>
It seems all browsers go disc-circle-square so I managed to get this with a bit of CSS
and a class (applies automatically to <ul>
elements inside an <ol>
element but not otherwise.) Fiddle here and CSS
below: 似乎所有的浏览器都是圆盘方形,所以我设法用一些
CSS
和一个类(自动应用于<ol>
元素中的<ul>
元素,但不是其他。) 在这里和CSS
下面的小提琴 :
ol > li > ul > li > ul > li > ul {
list-style-type: square;
}
ul.initial > li > ul > li > ul {
list-style-type: square;
}
ol > li > ul > li > ul {
list-style-type: circle;
}
ul.initial > li > ul {
list-style-type: circle;
}
ol > li > ul {
list-style: initial;
}
ul.initial {
list-style: initial;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.