ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSのカウンターリセット属性の使い方
CSSのカウンターリセット属性の使い方
- 青灯夜游オリジナル
- 2019-05-30 17:01:503313ブラウズ
css counter-reset 属性は、1 つ以上のカウンターを作成またはリセットするために使用され、通常は counter-increment 属性および content 属性と一緒に使用されます。このプロパティを使用すると、カウンターを正または負の任意の値に設定またはリセットできます。数値が指定されていない場合は、デフォルトの 0 が使用されます。
#CSS カウンターリセット属性を使用するにはどうすればよいですか?
counter-reset プロパティは、1 つ以上のカウンターを作成またはリセットします。counter-reset: none|id number|inherit
属性値:
● なし: デフォルト。セレクター カウンタをリセットできません#● id 番号: id は、カウンターをリセットするセレクター (id またはクラス) を定義するために使用されます。 number は、このセレクターの出現回数のカウンターの値を設定するために使用されます。正の数、ゼロ、または負の数を指定できます。
# 継承: counter-reset 属性の値が親要素から継承されることを指定します。
説明:この属性を使用すると、カウンターを設定または設定できます。任意の値にリセットすると、正または負の値を指定できます。数値が指定されていない場合は、デフォルトの 0 が使用されます。
注:「表示：なし」を使用した場合、カウンタはリセットできません。 「visibility: hidden」を使用するとカウンターをリセットできます。すべてのブラウザは counter-reset 属性をサポートしています。
css カウンタ リセット属性の例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"章节 " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>PHP教程</h1>
<h2>PHP教程</h2>
<h2>PHP教程</h2>
<h2>PHP教程</h2>
<h1>HTML教程</h1>
<h2>HTML教程</h2>
<h2>HTML教程</h2>
<h1>CSS教程</h1>
<h2>CSS教程</h2>
<h2>CSS教程</h2>
</body>
</html>レンダリング:
以上がCSSのカウンターリセット属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。