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;
        }
    }

CSS计数器重置和增量

2 个答案: