我想對::marker偽元素上的嵌套有序列表進行編號。 在一個普通的有序列表中,這是剛剛好。但是,如果有序列表嵌套在無序列表中,那么無序列表會影響有序列表的順序和嵌套。 如何正確地重置列表?
ol li {
padding-left: 0.5em
}
ol li::marker {
content: counters(list-item, ".") "";
}
<h2>Correct nested ol oumbers</h2>
<ol>
<li>One
<ol>
<li>One One</li>
<li>One Two</li>
<li>One three</li>
</ol>
</li>
<li>Two</li>
<li>three</li>
</ol>
<h2>Not correct nested ol numbers</h2>
<ul>
<li>list item</li>
<li>list item
<ol>
<li>One
<ol>
<li>One One</li>
<li>One Two</li>
<li>One three</li>
</ol>
</li>
<li>Two</li>
<li>three</li>
</ol>
</li>
<li>list item</li>
</ul>
好的,我自己算出來了,我必須設置一個自己的計數器,遞增它,然后重置它。
ol {
counter-set: ol-item 0;
}
ol ol {
counter-set: ol-item 0;
counter-reset: ol-item 1;
}
ol li {
padding-left: 0.5em;
counter-increment: ol-item;
}
ol li::marker {
content: counters(ol-item, ".") "";
}
<ol>
<li>One
<ol>
<li>One One</li>
<li>One Two</li>
<li>One three</li>
</ol>
</li>
<li>Two</li>
<li>three</li>
</ol>
<ul>
<li>list item</li>
<li>list item
<ol>
<li>One
<ol>
<li>One One</li>
<li>One Two</li>
<li>One three</li>
</ol>
</li>
<li>Two</li>
<li>three</li>
</ol>
</li>
<li>list item</li>
</ul>