CSS セレクターを使用して数値 ID を持つ HTML 要素をターゲットにできますか?

CSS セレクターは数値 ID を持つ要素をターゲットにできますか?

HTML5 では、ID に数字のみを含めることができ、技術的に有効になります。ただし、数値 ID を使用すると、CSS セレクターでターゲットにするときに問題が発生する可能性があります。

HTML での有効性

数値 ID は HTML5 仕様によって制限されず、HTML5 仕様で広くサポートされています。ブラウザ。 ID 値は非空白文字で構成されなければならないというルールに従います。

CSS セレクターの落とし穴

数字で始まる ID は HTML では有効ですが、無効です。 CSS セレクターで直接利用できます。この制限を回避するには、最初の数字をバックスラッシュ () でエスケープする必要があります。たとえば、CSS で ID「12」の要素を選択するには、#3132 を使用します (31 は「1」の 16 進コード、32 は「2」の 16 進コードです)。

回避策

CSS セレクターで数値 ID を使用することによって生じる複雑さを回避するには、ID を文字で始めることを検討してください。あるいは、JavaScript を使用して、数値 ID に基づいて要素を操作することもできます。 document.getElementById や document.querySelector などの JavaScript メソッドは、ID 形式に関係なく要素をターゲットにできます。

例

次のコードは、次の ID を持つ要素の操作を示しています。数字で始まります:

<div>

HTML では数値 ID が技術的に許容されていることに注意してください。 CSS スタイルを簡略化するために、ID を文字で始めることが一般に好まれます。

以上がCSS セレクターを使用して数値 ID を持つ HTML 要素をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。