CSS counter-reset and increment

Question

我想修复我的CSS计数器，以便它在每次出现OL或UL顶层父级时重置。嵌套的OL不应该重置计数器，但它应该只重置每个顶级OL或UL的实例。

可能有问题的css:

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

Answer 1

你不能专门针对顶层元素(我认为)。

相反，目标是所有的ol(就像你已经做的那样)，为了避免重置非顶级ol的计数器，创建另一个规则:

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

查看结果:

http://jsfiddle.net/rjqgz/

Answer 2

EDIT for solution: http://jsfiddle.net/rjqgz/2/

这是在列表(等)中样式数字和彩色项目符号的CSS。我包含了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:'0B0'; /* 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;
        }
    }