ホームページ > ウェブフロントエンド > CSSチュートリアル > 数字で始まる CSS クラス名を持つ要素をスタイル設定するには?

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

Barbara Streisand
リリース: 2024-11-01 09:40:30
オリジナル
409 人が閲覧しました

How to Style Elements with CSS Class Names Starting with Numbers?

数字で始まる 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート