ホームページ > 記事 > ウェブフロントエンド > cssのCountersプロパティの詳しい説明

cssのCountersプロパティの詳しい説明

php中世界最好的语言オリジナル: 2018-03-09 13:30:212195ブラウズ

今回はCSSのCounters属性について詳しく解説します。CSSのCounters属性を使用する際の注意点は何ですか？実際の事例を見てみましょう。 counter-reset: この値は必須です。セレクターで使用する必要があり、主にスコープを識別するために使用され、その値はカスタマイズできます。

counter-increment: カウンタに関連付けられた実際の範囲を識別するために使用されます。

content:
:before
、:after または ::before、::after の属性であるコンテンツの生成に使用されます。カウンタコンテンツを生成する場合は、主にcounter()と組み合わせて使用されます。 counter(): この関数は、挿入カウンターの値を設定するために使用されます。 :before、:after または ::before、::after: カウンターのコンテンツを生成するためにコンテンツとともに使用されます。

mdn の例:

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>counters()函数_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>ol {    margin: 0;    padding: 0 0 0 2em;    list-style: none;    counter-reset: item;
}li:before {    counter-increment: item;    content: counters(item, ".");    color: #f00;
}</style></head><body><ol class="test">
    <li>Node        <ol>
            <li>Node                <ol>
                    <li>Node</li>
                    <li>Node</li>
                    <li>Node</li>
                </ol>
            </li>
            <li>Node</li>
        </ol>
    </li>
    <li>Node</li>
    <li>Node</li></ol></body></html>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。