css - CSS カウンターのリセットとインクリメント

Question

OL または UL の最上位の親が出現するたびに CSS カウンターがリセットされるように、CSS カウンターを修正したいと考えています。ネストされた 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です。アウトライン番号を作成するためにWordpressで機能し、コンテンツリストのスタイルを設定したり、残りのすべてのスタイルを解除したりする方が簡単なため、htmlセクションを含めました。

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