0

ol 内の ol 形式が次のようになっている場合、正しいカウントを取得するのは簡単です

 <ol>
  <li>item</li> 
  <li>item             
    <ol>
      <li>item</li>     
      <li>item</li>    
      <li>item          
    </ol>
  </li>
  <li>item</li>        
  <li>item</li>      
  <li>item
     <ol>
      <li>item</li>      
      <li>item</li>      
      <li>item         
    </ol>
   </li>        
  <li>item</li>       
</ol>

ただし、ol 内に ul を入れたい場合、カウンターが正しく動作しません。

  <ol>
  <li>item</li> 
  <li>item             
    <ul>
      <li>item</li>     
      <li>item</li>    
      <li>item          
    </ul>
  </li>
  <li>item</li>        
  <li>item</li>      
  <li>item
     <ul>
      <li>item</li>      
      <li>item</li>      
      <li>item         
    </ul>
   </li>        
  <li>item</li>       
</ol>

http://jsfiddle.net/jaxymnh8/

ここに画像の説明を入力

ul を数えないようにする方法はありますか?

4

2 に答える 2

7

それを修正するための非常に簡単な方法があります。CSS 子セレクター ( ) を使用して、 の子である>のみがカウントに含まれるようにします。<li><ol>

ol > li::before {
  counter-increment: my;
  content: counter(my) ; 
  margin-right: 10px;
}

http://jsfiddle.net/jaxymnh8/1/

于 2015-09-04T01:45:58.540 に答える
2

サブにカウンターを追加する必要がありますli

これはあなたがそれを行う方法です

ol,ul {
    list-style:none;
}
.count{
    counter-reset: section;
}

ol>li {
    counter-reset: subsection;
}

ol>li:before {
    counter-increment: section;
    content: counter(section) ". ";
}

ul li:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

JSFIDDLE

于 2015-09-04T01:42:20.753 に答える