CSS および jQuery セレクターでハッシュタグを使用して「#」を使用する方法

ハッシュタグを使用した CSS および jQuery セレクターでの '#' の使用

問題

次の HTML について考えてみましょう:

<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="jQuery">$('#test#2').css('color', 'blue');</code>

解決策

「#」のようなメタ文字を名前のリテラル部分として使用するには、エスケープする必要があります。バックスラッシュ:

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

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

推奨事項

一貫性を確保し、Web 標準に従うために、ID に「#」を使用しないことをお勧めします。 ID は文字で始まる必要があり、文字、数字、ハイフン、アンダースコア、コロン、ピリオドのみを含めることができます。

エスケープ '.' ID 内

ID に「.」が含まれる場合は、それもエスケープする必要があります:

<code class="html"><div id="test.1"></div></code>

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

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

以上がCSS および jQuery セレクターでハッシュタグを使用して「#」を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。