css - CSS 计数器重置和增量

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

编辑解决方案：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:'\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;
        }
    }