CSSのカウンターリセット属性の使い方-フロントエンドQ&A-php.cn

CSSのカウンターリセット属性の使い方

青灯夜游

リリース： 2019-05-30 17:01:50

オリジナル

3256 人が閲覧しました

css counter-reset 属性は、1 つ以上のカウンターを作成またはリセットするために使用され、通常は counter-increment 属性および content 属性と一緒に使用されます。このプロパティを使用すると、カウンターを正または負の任意の値に設定またはリセットできます。数値が指定されていない場合は、デフォルトの 0 が使用されます。

CSSのカウンターリセット属性の使い方

#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 サイトの他の関連記事を参照してください。