色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

正確重置css中嵌套有序列表的計數器

傅智翔2年前8瀏覽0評論

我想對::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>