两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗?

Posted

技术标签:

【中文标题】两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗?【英文标题】:Can two elements on two different pages have the same ID in HTML/CSS? 【发布时间】:2019-04-14 06:09:40 【问题描述】:

是否可以在两个不同的页面上拥有具有相同 ID 的元素?

jQuery 选择器在这种情况下如何工作?

【问题讨论】:

它是什么样的应用程序?如果它不是单页应用程序,它可以工作 这个问题怎么和那个问题重复?这是一个完全在两个不同页面上询问具有相同 ID 的元素。还是重复投票是基于对唯一 ID 限制跨越多个页面的误解? 【参考方案1】:

id 在一个页面上必须是唯一的。

id 分配给一个元素,而不是class,其意图是说:

此元素具有唯一标识

但是,如果不同页面上的两个元素代表相同的数据,则它们具有相同的id 是可以接受的,例如:

page_1.html

<div id="title">About Me</div>

page_2.html

<div id="title">My Projects</div>

相反,如果两个页面上的元素代表不同的数据,并且您为它们分配了相同的id,虽然在技术上是有效的,但它可能会让您以后难以理解您的代码,例如:

page_1.html

<div id="contact">My Name</div>

page_2.html

<div id="contact">click to contact</div>

作为一个例子,一个人可能想对具有不同数据的元素使用相同的id,我分享以下经验,以防它帮助任何人思考类似的情况......

我最近尝试通过将动态注入的元素分配到具有相同 id(编辑内容场景中的 &lt;input&gt; 元素)的页面中来变得“聪明”,无论其位置如何(以编程方式它只存在在页面中一次)。

这种方法的优点是:

单个 CSS 样式定义 动态元素的单个 HTML 模板 后续事件处理逻辑的预期相似性

但是我发现我总是需要一种唯一标识实例的方法,因此我最终使用了指示唯一实例的数据属性。

它很快就变得相当复杂,我有点后悔我的方法,仍然想知道分配一个唯一的id 是否会使程序逻辑更简单(但我现在没有时间重构)。

【讨论】:

【参考方案2】:

如果每个具有相同 ID 的元素都驻留在自己的页面上,那么 jQuery 一次只能看到一个元素,因为每个页面上下文中一次只存在一个具有该 ID 的元素。就这么简单。

【讨论】:

以上是关于两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗?的主要内容,如果未能解决你的问题,请参考以下文章

小程序wxss;css中使用变量

为啥 Gatsby 的两个不同布局上的两个 StaticQuery 元素不能具有相同的名称?

HTML / CSS需要帮助在两个元素之间创建下划线[重复]

将两个不相等的数据框与两个索引(日期时间和日期)上的部分公共元素合并

两个单独的单击功能上的备用 css 更改

同一流(QuerySnapshot)可以与不同页面上的多个 StreamBuilder 一起使用吗? - -扑