数字で始まる CSS クラス名を持つ要素をスタイル設定するには?

数字で始まる CSS クラス名: 回避策

CSS 文法では数字で始まるクラス名の使用が禁止されているにもかかわらず、次のようなケースが発生します。このようなクラス名は HTML ドキュメント内に存在します。この記事では、これらの名前を CSS で有効にするための回避策について説明します。

問題の概要

CSS 構文によれば、識別子はエスケープされていない数字で始めることはできません。したがって、「.000000-8」などの数字で始まるクラスは無効です。

回避策

数字で始まる名前の CSS クラスを有効にする回避策

CSS エスケープ シーケンス "" を使用すると、数字をエスケープ文字に変換できます。たとえば、クラス名 '.000000-8' は次のように表現できます:

<code class="css">. 00000-8 {background:url(../../images/common/000000-0.8.png);}</code>

または

<code class="css">.<pre class="brush:php;toolbar:false"><code class="css">. 00000-8 { ... }</code>

003000000-8 {background:url(../../images/common/FFFFFF-0.8.png);}

使用例

CSS セレクターでエスケープ文字を使用するには、先頭の数字の前にエスケープ シーケンスを付けるだけです。たとえば、次のセレクターはクラス '000000-8' の要素と一致します:

実際的な考慮事項

この回避策は技術的な問題を解決しますが、一般に、数字で始まるクラス名を使用することはお勧めできません。これにより混乱が生じ、コードの保守が困難になる可能性があります。可能であれば、先頭に数字を付けない英数字のクラス名を使用することをお勧めします。

以上が数字で始まる CSS クラス名を持つ要素をスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。