CSS嵌套计数器:UL内部的OL计数

Question

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

有一个非常简单的方法来解决它.只需使用CSS子选择器(>),因此计数只包括<li>s的子项<ol>.

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

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