CSS 嵌套计数器：UL 内部 OL 计数

Question

如果 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>

但是，如果我想将 ul 放入 ol 中，我无法使计数器正常工作

  <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 ？

Answer 1

你需要给sub添加一个计数器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

Answer 2

有一种非常简单的方法可以修复它。只需使用 CSS 子选择器 (>)，因此计数仅包括 <ol>.

的子选择器 <li>

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

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

CSS 嵌套计数器：UL 内部 OL 计数

CSS Nesting counters: UL inside OL count

css

css-counter