Question

这个HTML有效吗？或者id是'a'和id'A'相同吗？

<div id="a">alpha</div>
<div id="A">Alpha</div>

Answer 1

是。它区分大小写。属性值始终区分大小写。不同的浏览器似乎做了不同的事情。

处理document.getElementById在浏览器中有所不同：

Mozilla执行区分大小写的搜索。
Internet Explorer：IE 8及更高版本执行区分大小写的搜索，而IE 7及更早版本执行不区分大小写的搜索。

Answer 2

这里有一点澄清，因为上述所有答案都只是部分正确。在DOM和Java Script的上下文中，ID是区分大小写的。在CSS中它们不是，因为CSS完全不区分大小写。

http://www.w3.org/TR/css3-selectors/#casesens

所有选择器语法在ASCII范围内不区分大小写（即[a-z]和[A-Z]等效），但不受选择器控制的部分除外。选择器中文档语言元素名称，属性名称和属性值的区分大小写取决于文档语言。例如，在HTML中，元素名称不区分大小写，但在XML中，它们区分大小写。名称空间前缀的区分大小写在[CSS3NAMESPACE]中定义。

因此，在不同情况下拥有两个id是个坏主意，因为你无法通过id独立设置它们。

Answer 3

嗯，你可以很容易地测试这个...... But yes, they are case-sensitive.

Answer 4

它在所有现代浏览器（IE 8+）上都有效，但我不推荐它，因为CSS不区分大小写。最好坚持使用一个案例，以避免CSS出现任何可能的混淆或错误。

Answer 5

请考虑以下元素：

<div id="Example"></div>

在现代浏览器中，大多数Element用来获取id对象的JavaScript方法都是区分大小写的：

document.getElementById('Example')         // <div id="Example">
document.getElementById('example')         // null
document.querySelector('#Example')         // <div id="Example">
document.querySelector('#example')         // null
document.querySelector('[id="Example"]')   // <div id="Example">
document.querySelector('[id="example"]')   // null

另一方面，您可以使用case-insensitive attribute selector通过id选择元素，而不考虑大小写：

document.querySelector('[id="Example" i]') // <div id="Example">
document.querySelector('[id="example" i]') // <div id="Example">

以上方法适用于ASCII范围内的所有HTML属性值。

尽管不建议这样做，但您也可以使用case-insensitive search正则表达式标志来独立于大小写地使用id获取元素。这种方法不仅仅可以用于不区分大小写的模式匹配，而且还可以用于

[...document.querySelectorAll('[id]')].find(e => /^Example$/i.test(e.id)) // <div id="Example">
[...document.querySelectorAll('[id]')].find(e => /^example$/i.test(e.id)) // <div id="Example">

对于CSS，ID selector（#example）区分大小写，而ID attribute selector（[id="example"]）区分大小写，除非您使用case-insensitive attribute selector（[id="example" i]）：

#Example         { /* ... */ } /* Match */
#example         { /* ... */ } /* Match */
[id="Example"]   { /* ... */ } /* Match */
[id="example"]   { /* ... */ } /* No Match */
[id="Example" i] { /* ... */ } /* Match */
[id="example" i] { /* ... */ } /* Match */

在DOM中节点ID是否区分大小写？

5 个答案: