HTML ID でハッシュ記号 (#) を使用できないのはなぜですか? それを修正するにはどうすればよいですか?

HTML および CSS でのハッシュ文字を使用した ID セレクターの使用

HTML では、要素を一意に識別するために ID が使用されます。ただし、ID 値でハッシュ (#) 記号などの特殊なメタ文字を使用すると、問題が発生します。この記事では、次のコードが失敗する理由を説明します:

<code class="html"><div id='test#1'>test1</div>
<div id='test#2'>test2</div></code>

<code class="css">#test#1 {
    color: red;
}</code>

<code class="javascript">$('#test#2').css('color', 'blue');</code>

説明:

# を含むメタ文字は CSS で特別な意味を持ちます。と jQuery セレクター。これを解決するには、バックスラッシュ () を使用してメタ文字をエスケープする必要があります。

解決策:

CSS:

<code class="css">#test\#1 {
    color: red;
}</code>

jQuery:

<code class="javascript">$('#test\#2').css('color', 'blue');</code>

推奨事項:

ID 値に # を使用することは一般的にお勧めできません。 W3C では、ID には文字、数字、ハイフン、アンダースコア、コロン、ピリオドのみを使用することを推奨しています。

代替構文:

ハッシュ文字をエスケープすることも代替アプローチです。ただし、ID 内での # の使用は完全に避けることをお勧めします。たとえば、id="test#1" の代わりに、id="test1" を使用します。

以上がHTML ID でハッシュ記号 (#) を使用できないのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。