dgv*_*vid 1651
对于HTML 4,答案是技术上:
ID和NAME令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(" - "),下划线("_") ,冒号(":")和句号(".").
HTML 5更加宽容,只说id必须包含至少一个字符,并且不能包含任何空格字符.
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.喜欢骆驼的情况？然后限制自己,没有连字符或下划线,并始终一致地使用大写或小写的第一个字符,不要混合它们.
一个现在非常模糊的问题是,至少有一个浏览器Netscape 6 错误地将id属性值视为区分大小写.这意味着如果您输入id="firstName"了HTML(小写"f")和#FirstName { color: red }CSS(大写"F"),则该错误的浏览器将无法将元素的颜色设置为红色.在2015年4月的编辑时,我希望您不会被要求支持Netscape 6.请将此视为历史脚注.
- 请注意,class和id属性*在XHTML中是区分大小写的,而其他所有属性都不是.Eric Meyer在我参加的CSS研讨会上提到了这一点. (77认同)
- 至于'.' 或使用jQuery在ID中的':',请参阅jQuery [FAQ](http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F).它包含一个小功能,可以进行必要的转义. (55认同)
- 另请注意,如果您尝试编写CSS规则以按ID定位元素,并且ID具有数字,则无法使用.坏消息! (30认同)
- `id`属性是[http://www.w3.org/TR/html4/struct/global.html#adef-id](HTML4中的大小写),必须以字母开头(限于A到Z) ).另请注意,您的示例不应将元素的文本颜色设置为红色,因为您的CSS引用的是具有类`FirstName`而不是您的`id`的元素. (7认同)
- 奥古斯都指出的错误仍然存在.在你的例子中,如果你在CSS 4或HTML 5中有`id ="firstName"`和CSS中的`#FirstName {color:red}`,_只有一个错误的浏览器会将元素的颜色设置为红色. (5认同)
- 事实上,您可以使用任何简单字母脚本(例如希腊语,西里尔语,亚美尼亚语或格鲁吉亚语字母)或音节(如日语kanas)或sinograms的任何字母表中的字母.您还可以在标识符中包含组合字符(例如希伯来语点)(但不是第一个字符),以及其他Unicode加入者(例如ZWJ和ZWNJ)(仅在另一个字母之前,但不是在开头标识符). (3认同)
- 有长度限制吗？ (3认同)
- id 值的另一个关键限制是它必须是唯一的。我知道这似乎是显而易见的，但我已经看到这条规则被打破太多次了 (2认同)
Pet*_*ton 217
从HTML 4规范:
ID和NAME令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(" - "),下划线("_") ,冒号(":")和句号(".").
常见的错误是使用以数字开头的ID.
- 请注意,HTML5允许更多HTML4,例如http://www.456bereastreet.com/archive/201011/html5_allows_almost_any_value_for_the_id_attribute_use_wisely/和http://www.w3.org/TR/html5/elements.html#the-id-属性 (20认同)
- 关于IE6的@rahmanisback,人们会这么认为,但我现在正在为一家银行完成一项提案,他们坚持要求供应商开发的任何应用程序都在IE6中运行.这适用于30,000个用户.哎呀,如果我们能让他们在所有桌面上更新他们的浏览器,它可能只会帮助失业率. (2认同)
- @Karl我很遗憾听到这个消息.尽一切努力警告IE6安全问题.然而IE7很快将成为新的IE6,所以是的,这个行业似乎是我们的命运,以弥补MS过去的错误. (2认同)
Mic*_*son 148
你可以从技术上在id/name属性中使用冒号和句点,但我强烈建议避免使用它们.
在CSS(和jQuery这样的几个JavaScript库)中,句点和冒号都有特殊意义,如果你不小心,你会遇到问题.句点是类选择器,冒号是伪选择器(例如,当鼠标悬停在元素上时,元素的":hover").
如果你给一个元素id"my.cool:thing",你的CSS选择器将如下所示:
#my.cool:thing { ... /* some rules */ ... }
这实际上是说,"以'我’的ID的元素,一类'酷’和'东西’伪选择"在CSS发言.
坚持任何案例,数字,下划线和连字符的AZ.如上所述,确保您的ID是唯一的.
那应该是你的第一个担忧.
- 你可以使用冒号和句号 - 但你需要使用双反斜杠来逃避它们,例如:$('#my \\.cool \\:thing')或转义变量:$('#'+ id.replace (/ \./,'\\.').replace(/ \:/,'\\:'))http://groups.google.com/group/jquery-en/browse_thread/thread/ba072168939b245a (20认同)
- 仅供参考,短划线*在技术上是连字符.减号不是ASCII字符集.http://en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes (4认同)
- 如果你在ids中有这些字符(`.`,`:`),并且不能删除它们(咳嗽...... Sharepoint),你可以在CSS中使用属性选择器而不是id选择器来解决这个问题,例如`[id =' my.cool:something']`,但是这个选择器的特异性低于id选择器,这可能会导致其他问题. (4认同)
- 为什么不用数字; 为什么只是AZ？只要您不以数字开头,数字在引用与数字键入的数据相关的元素时非常有用. (2认同)
- 旧的,我知道,但更新为包括数字和连字符连字符 (2认同)
Álv*_*lez 65
jQuery 确实处理任何有效的ID名称.你只需要转义元字符(即点,分号,方括号......).这就像是说JavaScript只引用了引号问题,因为你无法写
var name = 'O'Hara';
Mr *_*ark 63
严格来说应该匹配
[A-Za-z][-A-Za-z0-9_:.]*
但是jquery似乎对冒号有问题所以最好避免它们.
- 或者：“所以最好避免使用 jquery”。;) (10认同)
Zah*_*med 55
HTML5:
摆脱了id属性的额外限制,请看这里.剩下的唯一要求(除了在文档中是唯一的)是:
- 该值必须至少包含一个字符(不能为空)
- 它不能包含任何空格字符.
PRE-HTML5:
ID应匹配:
[A-Za-z][-A-Za-z0-9_:.]*
- 必须以AZ或az字符开头
- 可能包含
-(连字符),_(下划线),:(冒号)和.(句点)
但是应该避免:并且.因为:
例如,ID可以标记为"ab:c"并在样式表中引用为#ab:c但是作为元素的id,它可以表示id"a",类"b",伪选择器"c".最好避免混淆,远离使用.并且:完全.
- 事实上 HTML5 确实如此。 (3认同)
Mic*_*l_B 52
HTML5:ID和类属性的允许值
从HTML5开始,对ID值的唯一限制是:
- 必须在文档中是唯一的
- 不得包含任何空格字符
- 必须包含至少一个字符
类似的规则适用于类(当然,除了唯一性).
所以值可以是所有数字,只有一位数,只是标点字符,包括特殊字符,等等.只是没有空格.这与HTML4非常不同.
在HTML 4中,ID值必须以字母开头,然后只能使用字母,数字,连字符,下划线,冒号和句点.
在HTML5中,这些是有效的:
<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在HTML5中有效:
<div id="9lions"> ... </div>
但是,它在CSS中无效:
从CSS2.1规范:
在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高,加上连字符( - )和下划线( _); 它们不能以数字,两个连字符或连字符后跟数字开头.
在大多数情况下,您可以在具有限制或特殊含义的上下文中转义字符.
W3C参考文献
HTML5
该
id属性指定其元素的唯一标识符(ID).该值必须在元素的主子树中的所有ID中唯一,并且必须至少包含一个字符.该值不得包含任何空格字符.
注意:ID可以采取的形式没有其他限制; 特别是,ID可以只包含数字,以数字开头,以下划线开头,只包括标点符号等.
如果指定了该属性,则该属性必须具有一组空格分隔的标记,该标记表示该元素所属的各种类.
HTML元素分配给它的类包含在类空间上拆分class属性的值时返回的所有类.(忽略重复项.)
作者可以在类属性中使用的令牌没有其他限制,但鼓励作者使用描述内容性质的值,而不是描述内容所需表示的值.
pdc*_*pdc 34
在实践中,许多站点使用id以数字开头的属性,即使这在技术上是无效的HTML.
在HTML 5规范草案放宽了规则的id和name属性:它们是不能包含空格现在只是不透明的字符串.
小智 30
连字符,下划线,句点,冒号,数字和字母都可以与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>
Ser*_*gio 24
HTML5
请记住,ID必须是唯一的,即.文档中不得有多个具有相同id值的元素.
有关HTML5中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.
这是关于ID 的W3规范(从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).
更多信息:
Ant*_*ony 18
要引用带有句点的id,您需要使用反斜杠.不确定连字符或下划线是否相同.例如:HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
- 连字符和下划线通常不需要转义.但是,例外情况是连字符出现在标识符的开头,后跟另一个连字符(例如`\ - abc`)或数字(例如`\ -123`). (3认同)
Ste*_*gan 15
来自HTML 4规范......
ID和NAME令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(" - "),下划线("_") ,冒号(":")和句号(".").
编辑:噢哦!再次击败按钮!
Vor*_*ler 15
此外,永远不要忘记ID是唯一的.使用后,ID值可能不会再次出现在文档中的任何位置.
您可能拥有许多ID,但所有ID都必须具有唯一值.
另一方面,有class-element.就像ID一样,它可以出现很多次,但是这个值可能会被反复使用.
Bha*_*nki 12
元素的唯一标识符.
文档中不得有多个具有相同id值的元素.
任何字符串,具有以下限制:
- 必须至少有一个字符长
不得包含任何空格字符:
- U + 0020 SPACE
- U + 0009字符制表(标签)
- U + 000A LINE FEED(LF)
- U + 000C FORM FEED(FF)
- U + 000D运输返回(CR)
使用字符除外ASCII letters and digits, '_', '-' and '.'可能会导致兼容性问题,因为它们不被允许HTML 4.虽然此限制已被取消HTML 5,但ID应以兼容字母开头.
NVR*_*VRM 10
从ES2015开始我们也可以使用几乎所有的Unicode 字符开始，如果文档字符集设置为 UTF-8，
\n在这里测试： https: //mothereff.in/js-variables
\n
阅读相关内容：ES2015 中的有效 JavaScript 变量名称
\n\n\n在 ES2015 中，标识符必须以 $、_ 或具有 Unicode 派生核心属性 ID_Start 的任何符号开头。
\n标识符的其余部分可以包含 $、_、U+200C 零宽度\n非连接符、U+200D 零宽度连接符或具有 Unicode\n派生核心属性 ID_Continue 的任何符号。
\n
const target = document.querySelector("div").id\n\nconsole.log("Div id:", target )\n\ndocument.getElementById(target).style.background = "chartreuse"div {\n border: 5px blue solid;\n width: 100%;\n height: 200px\n}<div id="H\xcc\xb9\xcc\x99\xcc\xa6\xcc\xae\xcd\x89\xcc\xa9\xcc\x97\xcc\x97\xcd\xa7\xcc\x87\xcc\x8f\xcc\x8a\xcc\xbeE\xcd\xa8\xcd\x86\xcd\x92\xcc\x86\xcd\xae\xcc\x83\xcd\x8f\xcc\xb7\xcc\xae\xcc\xa3\xcc\xab\xcc\xa4\xcc\xa3C\xcd\xaf\xcc\x82\xcd\x90\xcd\x8f\xcc\xa8\xcc\x9b\xcd\x94\xcc\xa6\xcc\x9f\xcd\x88\xcc\xbbO\xcc\x9c\xcd\x8e\xcd\x8d\xcd\x99\xcd\x9a\xcc\xac\xcc\x9d\xcc\xa3\xcc\xbd\xcd\xae\xcd\x90\xcd\x97\xcc\x80\xcd\xa4\xcc\x8d\xcc\x80\xcd\xa2M\xcc\xb4\xcc\xa1\xcc\xb2\xcc\xad\xcd\x8d\xcd\x87\xcc\xbc\xcc\x9f\xcc\xaf\xcc\xa6\xcc\x89\xcc\x92\xcd\xa0\xe1\xb8\x9a\xcc\x9b\xcc\x99\xcc\x9e\xcc\xaa\xcc\x97\xcd\xa5\xcd\xa4\xcd\xa9\xcc\xbe\xcd\x91\xcc\x94\xcd\x90\xcd\x85\xe1\xb9\xae\xcc\xb4\xcc\xb7\xcc\xb7\xcc\x97\xcc\xbc\xcd\x8d\xcc\xbf\xcc\xbf\xcc\x93\xcc\xbd\xcd\x90H\xcc\x99\xcc\x99\xcc\x94\xcc\x84\xcd\x9c"></div>\n
你应该使用它吗？可能不是一个好主意！
\n阅读相关内容：JavaScript：“函数体后缺少 } 语法错误”
\n对于 HTML5
该值必须在元素的主子树中的所有ID中唯一,并且必须至少包含一个字符.该值不得包含任何空格字符.
至少一个字符,没有空格.
这为有效的用例打开了大门,例如使用重音字符.它还为我们提供了更多的弹药来射击自己,因为你现在可以使用会导致CSS和JavaScript问题的id值,除非你非常小心.
- ID最适合命名布局的一部分,因此不应为ID和类指定相同的名称
- ID允许使用字母数字和特殊字符
- 但避免使用
# : . * !符号 - 不允许空格
- 不是以数字或连字符后跟数字开头的
- 区分大小写
- 使用ID选择器比使用类选择器更快
- 对于长CSS类或Id规则名称,使用连字符" - "(下划线"_"也可以使用但不能用于seo)
- 如果规则具有ID选择器作为其键选择器,请不要将标记名称添加到规则中.由于ID是唯一的,因此添加标记名称会不必要地减慢匹配过程.
- 在HTML5中,id属性可用于任何HTML元素,而在HTML 4.01中,id属性不能用于:
<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
小智 7
在 HTML 中
ID应以{AZ}或{az}开头。您可以添加数字、句点、连字符、下划线和冒号。
例如：
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
但即使您可以使用冒号 (:) 或句点 ( .) 来创建 ID。CSS很难使用这些 ID 作为选择器。主要是当你想使用伪元素（:before和:after）时。
同样在 JavaScript 中也很难选择这些 ID。因此，您应该使用前四个 ID 作为许多开发人员的首选方式，如果有必要，您也可以使用后两个。