HTML: id 属性値は有効ですか?
<p>HTML 要素の <code>id</code> 属性を作成するときの値のルールは何ですか? </p>
P粉3641297442023-08-18 00:45:45
HTML 4 の場合、技術的な答えは次のとおりです:
HTML 5 はより寛容で、ID に少なくとも 1 文字が含まれることのみを要求し、スペース文字を含めることはできません。
#XXHTMLでは、id 属性では大文字と小文字が区別されます。 純粋に実用的な観点から、特定の文字を避けたほうがよい場合があります。 CSS セレクターでは、ピリオド、コロン、ポンド記号は特別な意味を持っているため、CSS で
バックスラッシュを使用するか、jQuery に渡される セレクター文字列で二重バックスラッシュを使用する必要があります。バー を使用して、これらの文字をエスケープしてください。スタイルシートまたはコードでは、ID にピリオドとコロンを使用するかどうかを決定する前に、文字をエスケープする必要がある頻度を考慮してください。 たとえば、HTML 宣言
<div id="first.name"></div> は有効です。この要素は、CSS では #first\.name として、jQuery では $('#first\\.name') として選択できます。ただし、バックスラッシュ $('#first.name') を忘れた場合は、first の ID を検索し、Element のクラスを持つ完全に有効なセレクターが得られます。 ＃＃＃名前＃＃＃。これは見落としがちな間違いです。長期的には、ID を first-name (ピリオドの代わりにハイフンを使用) として選択することをお勧めします。
命名規則に厳密に従うことで、開発タスクを簡素化できます。たとえば、小文字のみに完全に制限し、常にハイフンまたはアンダースコアを使用して単語を区切る場合 (ただし、ハイフンとアンダースコアの両方を使用することはできません。どちらかを選択し、もう一方は使用しないでください)、覚えやすいパターンが得られます。 first_name と入力する必要があることが常にわかっているため、「
なのか FirstName なのか?」と迷うことはありません。キャメルケース命名法を好みますか?次に、キャメルケースのみに制限し、ハイフンやアンダースコアは使用せず、最初の文字には常に大文字または小文字を一貫して使用し、混合しないでください。
現在、非常にまれな問題は、少なくとも 1 つのブラウザ Netscape 6 が、id 属性値を大文字と小文字を区別する
(小文字の 'f') を入力し、CSS に #FirstName { color: red } (大文字の 'f') を入力した場合を意味します 'F' ')、欠陥のあるブラウザは要素の色を赤に設定できません。編集時点 (2015 年 4 月) では、Netscape 6 をサポートする必要はないと思います。これは歴史的なメモだと考えてください。