にとってHTML 4、答えは技術的には:
IDおよびNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( " - ")、アンダースコア( "_")を続けることができます。 、コロン( ":")、およびピリオド( "。")。
HTML 5IDは少なくとも1文字を含まなければならず、空白文字を含んではいけないと言っているだけです。
id属性では大文字と小文字が区別されます。XHTML。
純粋に実用的な問題として、特定の文字を避けたいと思うかもしれません。ピリオド、コロン、そして '#'はCSSセレクターにおいて特別な意味を持つので、あなたはそれらを使用してそれらの文字をエスケープする必要があるでしょう。CSSのバックスラッシュまたはダブルバックスラッシュjQueryに渡されるセレクタ文字列。 IDのピリオドやコロンに夢中になる前に、スタイルシートやコード内の文字をエスケープする頻度を考えてください。
例えば、HTML宣言<div id="first.name"></div>
有効です。 CSSでその要素を次のように選択できます。#first\.name
そしてjQueryではこんな感じ:$('#first\\.name').
バックスラッシュを忘れると$('#first.name')
、あなたはidを持つ要素を探している完全に有効なセレクタを持つでしょうfirst
そしてクラスもあるname
。これは見落としがちなバグです。長い目で見ればidを選ぶほうが幸せかもしれませんfirst-name
(ピリオドではなくハイフン)代わりに。
命名規則に厳密に従うことで、開発作業を簡素化できます。たとえば、完全に小文字に限定し、常にハイフンまたはアンダースコアのいずれかで単語を区切る(ただし、両方ではなく一方を選択し、もう一方は使用しない)場合は、覚えやすいパターンがあります。あなたは不思議に思うことはないでしょう」firstName
またはFirstName
なぜなら、あなたはいつもタイプするべきだということを知っているからです。first_name
。ラクダケースを好みますか?ハイフンやアンダースコアは使用しないでください。また、常に最初の文字に大文字または小文字を使用し、混在させないでください。
現在非常にあいまいな問題は、少なくとも1つのブラウザ、Netscape 6、大文字と小文字を区別するものとして誤って扱われたid属性値。それはあなたがタイプしたならid="firstName"
あなたのHTML(小文字の 'f')で#FirstName { color: red }
あなたのCSS(大文字の 'F')では、そのバグのあるブラウザは要素の色を赤に設定することに失敗するでしょう。 2015年4月の編集時点では、Netscape 6をサポートするよう求められていないことを願っています。これを歴史的な脚注と考えてください。
id
属性は[w3.org/TR/html4/struct/global.html#adef-id](caseHTML 4では機密であり、文字で始める必要があります(AからZまで)。また、CSSはクラスを持つ要素を参照しているため、この例では要素のテキストの色を赤にしないでください。FirstName
あなたにではないid
。 - Augustus Klingid="firstName"
HTML 4またはHTML 5で#FirstName { color: red }
CSSでは、バグのあるブラウザのみ要素の色を赤に設定します。 - Stephen Booher
からHTML 4の仕様:
IDおよびNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( " - ")、アンダースコア( "_")を続けることができます。 、コロン( ":")、およびピリオド( "。")。
よくある間違いは、数字で始まるIDを使用することです。
技術的には、id / name属性にコロンとピリオドを使用することができますが、両方を避けることを強くお勧めします。
CSS(およびjQueryのようないくつかのJavaScriptライブラリ)では、ピリオドとコロンの両方に特別な意味があり、注意しないと問題に遭遇します。ピリオドはクラスセレクタで、コロンは疑似セレクタです(たとえば、マウスが上にあるときの要素の ":hover")。
要素に「my.cool:thing」というIDを付けると、CSSセレクタは次のようになります。
#my.cool:thing { ... /* some rules */ ... }
これは、CSSで言うと、「idが「my」、クラスが「cool」、および「thing」疑似セレクターの要素」ということです。
大文字と小文字、数字、アンダースコア、ハイフンはすべてA〜Zにしてください。そして上記のように、あなたのIDがユニークであることを確認してください。
それがあなたの最初の関心事です。
.
、:
)IDで、それらを削除することはできません(せき... Sharepoint)、あなたはCSSでIDセレクタの代わりに属性セレクタを使用してこれを回避することができます。[id='my.cool:thing']
しかしながら、このセレクターはidセレクターよりも低い特異性を持ち、それは他の問題を引き起こすかもしれません。 - Faust
jQueryする有効なID名を処理してください。あなたはただメタ文字(すなわち、ドット、セミコロン、角括弧...)をエスケープする必要があります。それはあなたが書くことができないという理由だけでJavaScriptが引用符の問題を抱えていると言うようなものです
var name = 'O'Hara';
厳密に一致するはずです
[A-Za-z][-A-Za-z0-9_:.]*
しかし、jqueryはコロンに問題があるように思われるので、それらを避ける方が良いかもしれません。
id属性に対する追加の制限を取り除きますこちらをご覧ください。 (文書内で固有であることを除けば)残っている唯一の要件は以下のとおりです。
IDは一致する必要があります。
[A-Za-z][-A-Za-z0-9_:.]*
-
(ハイフン)、_
(アンダースコア):
(コロン)と.
(期間)しかし人は避けるべきです:
そして.
原因:
たとえば、IDに "ab:c"というラベルを付けて#ab:cとしてスタイルシート内で参照することができますが、要素のIDであることと同様に、ID "a"、クラス "b"、疑似セレクタ "c"混乱を避け、使用しないようにしてください。そして完全に。
HTML 5では、IDの値に対する唯一の制限は次のとおりです。
同様の規則がクラスにも適用されます(もちろん、一意性を除く)。
そのため、値はすべて1桁、1桁だけ、句読点だけ、特殊文字を含むことができます。空白はありません。これはHTML4とは非常に異なります。
HTML 4では、ID値は文字で始まらなければならず、その後に続くことができるのは文字、数字、ハイフン、アンダースコア、コロン、ピリオドだけです。
HTML 5ではこれらは有効です:
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>
IDの値に数字、句読点、または特殊文字を使用すると、他のコンテキスト(CSS、JavaScript、正規表現など)で問題が生じる可能性があることに注意してください。
たとえば、次のIDはHTML 5では有効です。
<div id="9lions"> ... </div>
ただし、CSSでは無効です。
CSS 2.1仕様から:
CSSでは、識別子(要素名、クラス、およびIDを セレクタ)には、[a-zA-Z0-9]およびISO 10646の文字のみを含めることができます。 U + 00A0以上の文字、ハイフン( - )およびアンダースコア (_);数字、2つのハイフン、またはハイフンで始めることはできません。 その後に数字が続きます。
ほとんどの場合、制限や特別な意味があるコンテキストでは、文字をエスケープすることができます。
W3Cの参考文献
HTML5
の
id
attributeはその要素の一意の識別子(ID)を指定します。値は、要素のホーム内のすべてのIDの中で一意でなければなりません サブツリーで、少なくとも1文字を含む必要があります。値はいけません スペース文字を含める。
注:IDがとることができる形式に他の制限はありません。に 特に、IDは数字だけで構成することも、数字で始めること、開始することもできます。 下線付き、句読点だけで構成される、など
属性が指定されている場合、その属性は以下の値の集合でなければなりません。 さまざまなクラスを表すスペース区切りのトークン 要素はに属します。
HTML要素がそれに割り当てたクラスはすべてから成ります class属性の値が分割されたときに返されるクラス スペース(重複は無視されます。)
作者が使用できるトークンに追加の制限はありません。 class属性ですが、作者は次のような値を使うことをお勧めします。 説明する値ではなく、コンテンツの性質を説明する コンテンツの表示方法
実際には多くのサイトで使用されていますid
技術的には有効なHTMLではありませんが、数字で始まる属性。
のHTML 5ドラフト仕様の規則を緩めるid
そしてname
属性:スペースを含むことができない単なる不透明な文字列です。
ハイフン、アンダースコア、ピリオド、コロン、数字、および文字はすべて、CSSおよびJQueryでの使用に有効です。以下はうまくいくはずですが、ページ全体で一意でなければならず、また[A-Za-z]の文字で始める必要があります。
コロンとピリオドで作業するにはもう少し作業が必要ですが、次の例に示すように実行できます。
<html>
<head>
<title>Cake</title>
<style type="text/css">
#i\.Really\.Like\.Cake {
color: green;
}
#i\:Really\:Like\:Cake {
color: blue;
}
</style>
</head>
<body>
<div id="i.Really.Like.Cake">Cake</div>
<div id="testResultPeriod"></div>
<div id="i:Really:Like:Cake">Cake</div>
<div id="testResultColon"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var testPeriod = $("#i\\.Really\\.Like\\.Cake");
$("#testResultPeriod").html("found " + testPeriod.length + " result.");
var testColon = $("#i\\:Really\\:Like\\:Cake");
$("#testResultColon").html("found " + testColon.length + " result.");
});
</script>
</body>
</html>
IDは一意でなければならないことに留意してください。同じid値を持つドキュメント内に複数の要素があってはいけません。
HTML 5のIDコンテンツに関する規則は次のとおりです(一意であることは別として)。
This attribute's value must not contain white spaces. [...]
Though this restriction has been lifted in HTML 5,
an ID should start with a letter for compatibility.
これはW3IDに関するスペック(MDNから):
Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values
(for example, they did not permit ID values to begin with a number).
ピリオドを含むIDを参照するには、バックスラッシュを使用する必要があります。ハイフンやアンダースコアについても同じかどうかわからない。 例えば: HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
\--abc
)または数字(例:\-123
) - MrWhite
HTML 4の仕様から...
IDおよびNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( " - ")、アンダースコア( "_")を続けることができます。 、コロン( ":")、およびピリオド( "。")。
編集:ああ!もう一度ボタンに殴られて!
また、IDが一意であることを忘れないでください。いったん使用されると、ID値は文書内のどこにも現れないかもしれません。
あなたは多くのIDを持っているかもしれませんが、すべてユニークな値を持たなければなりません。
一方、class-elementがあります。 IDと同じように、何度も出現する可能性がありますが、値は何度も使用される可能性があります。
要素の一意の識別子。
ドキュメント内に同じid値を持つ要素が複数あってはいけません。
以下の制限付きの任意のストリング。
スペース文字を含めることはできません。
以外の文字を使うASCII letters and digits, '_', '-' and '.'
互換性の問題を引き起こす可能性があります。HTML 4
。この制限は解除されましたがHTML 5
互換性のため、IDは文字で始める必要があります。
コロン(:)とピリオド(。)はHTML仕様では有効ですが、これらはidセレクタとしては無効です。CSSあなたがその目的のためにそれらを使用するつもりならば、おそらくおそらく最も避けられるべきです。
にとってHTML5
値は、要素の家のすべてのIDの中で一意でなければなりません サブツリーで、少なくとも1文字を含む必要があります。値はいけません スペース文字を含める。
少なくとも1文字、スペースなし。
これにより、アクセント付き文字の使用などの有効な使用例への扉が開かれます。 CSSとJavaScriptの両方で問題を起こす可能性があるid値を使用することができるようになったため、注意が必要な場合を除き、大量の弾薬を使用することができます。
# : . * !
シンボル<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
どれか英数字と」 - 「と」_「有効です。しかし、あなたはID名を始める間に任意の文字を含む-ZまたはそしてZ。
スペースを入れないでください。少なくともaからz、0から9までの文字で始める必要があります。
私はこれがこの質問に答えるのに非常に遅れていることを知っています、しかし私は同じ問題を抱えていたので私はこの答えをもっと完全に見つけるので、私は答えることにします。
a、b、c ... x、y、z、A、B、C ... X、Y、Z、0、1、2 ... 7、8、9、 - 、_のすべてに使用できます。ただし、最初の文字として数字と - を使用しないでください。
これらは間違っています:
1adfsvsdf // use number in first
-adfasdf // use - in first
afd'ksdf // use ' in characters
asdf;asdf // use ; in characters
アルファベット - >大文字& A小さい
数字 - > 0-9
特殊文字 - > ':'、 ' - '、 '_'、 '。
フォーマットは '。'から始まる必要があります。またはアルファベットの後に、より多くのアルファベットまたは数字のいずれかの特殊文字を続けたものです。 idフィールドの値は '_'で終わってはいけません。
また、スペースは、指定されている場合は許可されず、異なる値として扱われます。id属性の場合は無効です。
HTML 5では、idは数字で始めることはできません。 id-"1kid"
スペースは使えません(id ="Some kind"
)
ID
値は非常に異なります。これはHTML5の簡単で完全な概要です。ID
規則:stackoverflow.com/a/31773673/3597276 - Michael_B**.**)
jQueryを使用すると、たとえば次のように使用すると、かなりの問題が発生します。<input id="me.name" />
その後$("#me.name").val()
jQueryに<me>
クラスのタグ.name
、誰も本当に望んでいません! - Sam Swift 웃