CSS計數器復位和增量

Question

我想修復我的CSS計數器，以便重置每次出現OL或UL頂級父項。嵌套的OL不應該重置計數器，但它應該僅針對頂級OL或UL的每個實例進行重置。

的CSS是有可能的問題：

section.post-content ol { 
    counter-reset: item; 
} 

Answer 1

您水溼明確指定頂層元素（我認爲）。

相反，針對所有醇（因爲你已經），並避免正在重置非頂級醇計數器，創建另一個規則：

ul ul {counter-reset: none} 
ol ul {counter-reset: none} 

看到的結果是：

http://jsfiddle.net/rjqgz/

Answer 2

編輯解決方案：http://jsfiddle.net/rjqgz/2/

這裏是風格的NU的CSS列表（等）中的mbers和彩色子彈。我包含了html部分，因爲這將在Wordpress中用於創建大綱編號，並且因爲更簡單地設置內容列表的樣式並將其中的所有其他部分樣式化。

section.post-content ol, section.post-content ul { 
    counter-reset: item; 
} 
section.post-content ul ol {counter-reset: none} 
section.post-content ol ul {counter-reset: none} 

section.post-content li { 
    display: block; 
} 
section.post-content ol > li { 
position:relative; 
list-style:none; } 

section.post-content ol li:before { 
    counter-increment: item; 
    content: counters(item, ".") " "; 

    position:absolute; 
    top:-.05em; 
    left:-3.7em; 

    width:3em; 
    height:.9em; line-height:1em; 
    /* Some space between the number and the content in browsers that support 
     generated content but not positioning it (Camino 2 is one example) */ 
    margin-right:8px; 
    padding:4px; 

    font-style:italic; font-size:1.02em; font-weight:bold; 
    font-family: Cambria, Cochin, serif; 
    opacity:.5; 
    text-align:right; 
} 
section.post-content ul > li { 
    position:relative; 
    list-style:none; 
} 
section.post-content ul > li:before { /* Position and style the bullet */ 
    content:'\00B0'; /* CSS Special Character Converter: http://www.evotech.net/articles/testjsentities.html */ 

    position:absolute; 
    top:-.1em; 
    left:-.75em; 
    width:.6em; height:1em; line-height:1em; 

    margin-right:8px; 
    padding:4px; 

    font-size:2.08em; 
    font-family: Cambria, Cochin, serif; 
    opacity:.4; /* If you want to change color instead, place in header.php */ 
    text-align:center; 
} 


/* MARGINS */ 

/*mobile*/ 
section.post-content ol, section.post-content ul, section.post-content li { /*children indent*/ 
    margin:0; padding:0; } 
section.post-content ol > li, section.post-content ul > li { 
    margin:0 0em .3em 1em; } 


@media only screen 
    and (min-width : 700px) { 
     section.post-content ol, section.post-content ul { /*children indent*/ 
     margin:0; padding:0; 
     margin-left:2em; 
     } 
     section.post-content > ol, section.post-content > ul { /*parent*/ 
     margin-left:0; padding-left:0; } 

     section.post-content ol > li, section.post-content ul > li { 
     margin:0 0em .3em 2em; 
     } 
    }