我可以有一个ID为数字的div吗？ [英] can I have a div with id as number?
问题描述
我可以使用 id 包含 div ？
例如
我可以用id作为数字吗？
是的，您可以。
$ b id 只包含数字的值在HTML中完全有效;除了空间外什么都可以。虽然较早的HTML规范更具限制性（ ref ， ref ），需要一小组字符，并从一个字母，浏览器从不关心，这是HTML5规范打开功能的重要组成部分。
$ b 如果您要使用这些使用CSS选择器（例如，使用CSS对它们进行样式设置，或者使用
querySelector ， id开头使用 id 选择器字面 ;你必须逃避它。 （例如，＃12 是一个无效的CSS选择器;您必须将它写入＃\ 31 \ 32 。）出于这个原因，如果你打算将它与CSS选择器一起使用，那么用一个字母来启动它就简单了。 为清楚起见，以上链接位于列表中：
- HTML5 - ID属性
- HTML4 - ID属性和 ID和名称标记
- 符合CSS 2.1规则
下面是一个使用 div 与 id 12，并以三种方式处理它：
- 使用CSS
- 通过
docum使用JavaScript ent.getElementById - 使用JavaScript通过
document.querySelector（在支持它的浏览器上）
它适用于我曾经用过的每个浏览器（请参阅下面的代码清单）。实例：
（function（）{use strict; document。 getElementById（12）。style.border =2px solid black; if（document.querySelector）{document.querySelector（＃\\31\\\32）。style.fontStyle =italic ; display（字体样式是使用JavaScript设置的，使用< code> document.querySelector< / code> ;:）; display（document.querySelector（\＃\\\\31\\\ \\\\\\\\\\\\\\\\\\\\\\\\''） ）;}}）;}函数display（msg，tag）{var elm = document.createElement（tag ||'p'）; elm.innerHTML = String（msg）; / code>，所以我们不能这样做。 document.body.appendChild（elm）;}}）（）; 我从来没有在浏览器中看到上述失败。以下是我见过的浏览器的一个子集： 但是：如果您将对元素使用CSS选择器，最好以字母开头;像 Can I have a eg Can I have a div with id as number? Yes, you can. If you're going to use those Those links above in a list for clarity: Below is an example using a It works on every browser I've ever thrown at it (see list below the code). Live Example:
I've never seen the above fail in a browser. Here's a subset of the browsers I've seen it work in: But again: If you're going to use CSS selectors with the element, it's probably best to start it with a letter; selectors like 这篇关于我可以有一个ID为数字的div吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！＃\ 31 \32 {background：＃0bf;} pre {border：1px solid #aaa;背景：#eee;} < div id = 12>此div为：< code>& lt; div id =12> ...& lt; / div>< / code>< / div>< p> < / p>< p>使用CSS设置背景：< / p>< pre>＃\ 31 \ 32 {background：＃0bf;}< / pre>< p>< （31是十六进制为1的字符代码; 32是十六进制为2的字符代码，引入那些带有反斜杠的十六进制字符序列< a href =http://www.w3.org/TR/CSS21 ）/syndata.html#value-def-identifier\">参见CSS规范< / a>。）< / p>< p>使用< code> document.getElementById< / code> ：< / p>< pre> document.getElementById（12）。style.border =2px solid black;< / pre>
/ b>
＃\ 31 \ 32 这样的选择器很难阅读。div with id as number?<div id="12"></div>
id values that consist solely of digits are perfectly valid in HTML; anything but a space is okay. And although earlier HTML specs were more restrictive (ref, ref), requiring a small set of chars and starting with a letter, browsers never cared, which is a big part of why the HTML5 specification opens things up.ids with CSS selectors (e.g, style them with CSS, or locate them with querySelector, querySelectorAll, or a library like jQuery that uses CSS selectors), be aware that it can be a pain, because you can't use an id starting with a digit in a CSS id selector literally; you have to escape it. (For instance, #12 is an invalid CSS selector; you have to write it #\31\32.) For that reason, it's simpler to start it with a letter if you're going to use it with CSS selectors.div with the id "12" and doing things with it three ways:
document.getElementByIddocument.querySelector (on browsers that support it)(function() {
"use strict";
document.getElementById("12").style.border = "2px solid black";
if (document.querySelector) {
document.querySelector("#\\31\\32").style.fontStyle = "italic";
display("The font style is set using JavaScript with <code>document.querySelector</code>:");
display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
} else {
display("(This browser doesn't support <code>document.querySelector</code>, so we couldn't try that.)");
}
function display(msg, tag) {
var elm = document.createElement(tag || 'p');
elm.innerHTML = String(msg);
document.body.appendChild(elm);
}
})();#\31\32 {
background: #0bf;
}
pre {
border: 1px solid #aaa;
background: #eee;
}<div id="12">This div is: <code><div id="12">...</div></code>
</div>
<p>In the above:</p>
<p>The background is set using CSS:</p>
<pre>#\31\32 {
background: #0bf;
}</pre>
<p>(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">see the CSS spec</a>.)</p>
<p>The border is set from JavaScript using <code>document.getElementById</code>:</p>
<pre>document.getElementById("12").style.border = "2px solid black";</pre>
#\31\32 are pretty tricky to read.
