一个HTML元素可以有多个id吗?

19 回复 | 直到 5 年前

1

217

ThinkingStiff 14 年前

在XML中,片段标识符是类型ID,并且只能有类型ID为per的单个属性元素。因此,在XHTML 1.0中 id属性定义为类型 ID。为了确保XHTML 1.0 文档是结构良好的XML 文档,XHTML 1.0文档必须定义时使用id属性元素上的片段标识符上面列出的。查看HTML 兼容性指南关于确保此类锚的信息服务时向后兼容 XHTML文档作为媒体类型 text/html。

2

204

BoltClock 14 年前

与其他人所说的相反,正确的答案是是的

这个 Selectors spec 对此非常清楚:

如果一个元素有多个ID属性,则为了ID选择器的目的,所有这些属性都必须被视为该元素的ID。这种情况可以通过使用xml:id、DOM3-Core、XMLDTD和特定于名称空间的知识来实现。

编辑

只是澄清一下:是的,XHTML元素可以有多个id,例如。

<p id="foo" xml:id="bar">

但是将多个id分配给同一个id id 使用空格分隔列表的属性是不可能的。

3

28

Peter Mortensen Pieter Jan Bonestroo 5 年前

号码而 definition from W3C 对于HTML 4似乎没有明确地涵盖你的问题 definition of the name and id attribute 标识符中没有空格:

ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。

4

27

Peter Mortensen Pieter Jan Bonestroo 5 年前

我的理解一直是:

ID是 一次性使用 并且仅应用于一个元件。..
- 每一个都是 归因于a 唯一标识符 (仅)一个元素 .
可以使用类 不止一次 ...
- 因此,它们可以应用于 多个元素 ,同样不同的是 每个元素有多个类(即多个类) .

5

20

tvanfosson 17 年前

不是的。如果每个DOM元素都有一个id,那么它就有一个唯一的id。你可以用这样的方法来近似它:

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

然后使用导航来获得你真正想要的东西。

如果你只是想应用样式,类名更好。

6

20

Peter Mortensen Pieter Jan Bonestroo 5 年前

每个元素只能有一个ID,但确实可以有多个类。但不要有多个类属性;将多个类值放入一个属性中。

<div id="foo" class="bar baz bax">

完全合法。

7

4

Anjisan 17 年前

不,一个标签不能有多个id,但我见过一个带有 name 属性和a id 某些应用程序对这些属性的处理是相同的。

8

4

Peter Mortensen Pieter Jan Bonestroo 5 年前

不,如果你想走这条路,你应该使用嵌套的DIV。此外,即使你可以,想象一下当你运行document.getElementByID()时会造成的混乱。如果有多个ID,它会抓取什么ID?

在稍微相关的主题上,您可以添加多个班请参阅Eric Myers的讨论:,

http://meyerweb.com/eric/articles/webrev/199802a.html

9

3

Peter Mortensen Pieter Jan Bonestroo 5 年前

我想从技术上说是的,因为从技术上讲,渲染的内容总是依赖于浏览器的。大多数浏览器都会尽可能地遵守规范,据我所知,CSS规范中没有任何与之相悖的内容。我只会保证在任何其他解释器介入之前,实际发送到浏览器的HTML、CSS和JavaScript代码。

然而,我也说不,因为我通常测试的每个浏览器实际上都不允许你使用。

如果你需要亲自查看,请将以下内容另存为.html文件,并在主要浏览器中打开。在我测试的所有浏览器中,JavaScript函数都不会与元素匹配。但是,从id标签中删除“hunkojunk”,一切正常。

示例代码

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

    <script type="text/javascript">
        document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
    </script>
</body>
</html>

10

3

Samdom For Peace 5 年前

不。

来自 3.2.3.1 The id attribute :

该值不得包含任何空格字符。

id="a b" <--在其中找到空格字符值 .

也就是说,你能样式多个ID。但如果你遵循规范,答案是否定的。

11

2

Peter Mortensen Pieter Jan Bonestroo 5 年前

来自 7.5.2 Element identifiers: the id and class attributes :

id属性分配一个 独特的 元素的标识符(可能由SGML解析器验证)。

和

ID和NAME标记必须以字母([a-Za-z])开头,可以是后跟任意数量的字母、数字([0-9])、连字符(“-”), 下划线(“_”)、冒号(“:”)和句点(“.”)。

因此,“id”必须是唯一的,不能包含空格。

12

1

Peter Mortensen Pieter Jan Bonestroo 5 年前

号码

话虽如此,并没有什么能阻止你们这样做。但你们会在各种浏览器上得到不一致的行为。不要这样做。每个元素一个ID。

如果要对一个元素进行多个赋值,请使用类(用空格分隔)。

13

0

Robert K 17 年前

分配给div元素的任何ID都是唯一的。但是,您可以将多个ID分配给div元素“under”,而不是“to”。在这种情况下,您必须将这些ID表示为 <span></span> ID。

例如,您希望同一HTML页面中的两个链接指向页面中的同一div元素。

两个不同的链接

<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

指向页面的同一部分

<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>

14

0

Peter Mortensen Pieter Jan Bonestroo 5 年前

正如在我之前的其他人所说,简单的答案是否定的。一个元素不能有多个ID,一个ID在一个页面中不能使用多次。试试看,你会发现它有多好 does not 的常用口语形式 工作。

作为回应 tvanfosson's answer 关于在两个不同的元素中使用相同的ID。据我所知,一个ID在一个页面中只能使用一次,无论它是否附加到其他标签上。

根据定义,需要ID的元素应该是唯一的,但如果你需要两个ID,那么它就不是真正唯一的,而是需要一个类。

15

0

Peter Mortensen Pieter Jan Bonestroo 5 年前

这很有趣,但据我所知,答案是肯定的。我不明白为什么你需要一个嵌套ID,因为你通常会将其与另一个具有相同嵌套ID的元素交叉。如果你不这样做,就没有意义,如果你这样做,意义仍然很小。

16

0

Peter Mortensen Pieter Jan Bonestroo 5 年前

课程是专门为此而设的,以及以下是您可以理解它的代码:

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;

        }
    .fam{
            border: 2px solid #ccc;
        }
    .x{
            background-color:#ccc;
        }

    </style>
</head>

<body>
    <div class="personal fam x"></div>
</body>
</html>

17

0

Peter Mortensen Pieter Jan Bonestroo 5 年前

通过执行以下示例,您可以通过部分匹配获得元素[s],该示例显示了querySelctor和querySelctorAll。

在这两种情况下,我还使用了一个由*修改的选择器,其行为与id属性值中包含的部分字符串相匹配。

我正在使用Chrome,这两种解决方案都能发挥作用,但关于浏览器兼容性、良好的编程实践和w3标准,我不能说。

正如您所注意到的,id是重复的,id属性值中也有空格。

document.querySelector("[id*='123']").innerText = 'the first works';
document.querySelectorAll("[id*='nested']")[1].innerText = 'the second works too';

// But if you try
document.getElementById("[id*='beta']").innerText = 'it does not work';
document.getElementById("#beta]").innerText = 'it does not work';
document.getElementById("#alfa beta nested element_123 task_123]").innerText = 'it does not work';

// none of them will work but get `null` instead and so you get an error in console

<div id="alfa beta nested element_123 task_123"></div>
<div id="alfa beta nested element_123 task_123"></div>

18

-3

Ole Reidar Johansen 15 年前

ID应该是唯一的,因此您应该在一个页面上只使用一次特定的ID。类可以重复使用。

检查 HTML id Attribute (W3School)了解更多详情。