首页 > web前端 > css教程 > 为什么 HTML 中的重复 ID 有时会起作用,最佳实践是什么?

为什么 HTML 中的重复 ID 有时会起作用,最佳实践是什么?

Barbara Streisand
发布: 2024-12-21 20:50:28
原创
667 人浏览过
<p>Why Do Duplicate IDs in HTML Sometimes Work, and What's the Best Practice?

<p>具有相同 ID 的多个元素响应 CSS 选择器

<p>在单个网页中为多个元素分配相同 ID 通常被认为是不好的做法。根据 W3C 文档,ID 属性必须具有唯一值来唯一标识其各自的元素。

<p>但是,某些情况(例如使用 jQuery 插件)可能会无意中导致重复的 ID。令人惊讶的是,浏览器倾向于通过“静默失败”来处理这种情况。他们尝试解释无效 HTML 背后的意图并相应地调整其行为。

<p>例如,考虑以下代码:

#red {
  color: red;
}
登录后复制
<p>
登录后复制
<p>尽管 ID 重复,但两个段落都会在所有主要浏览器中显示为红色。但是,这种行为并不能得到保证,并且可能会导致意外的副作用。

<p>例如,使用 document.getElementById('red') 通过元素的 ID 访问元素将仅返回第一个元素。要选择这两个元素,您需要使用属性选择器,例如 document.querySelectorAll('p[id="red"]')。但是,IE7 及以下版本不支持此方法。

<p>为避免潜在问题,强烈建议使用类名而不是 ID 来使用 CSS 定位多个元素。类名是专门为此目的而设计的,并确保所有浏览器之间的一致性。

以上是为什么 HTML 中的重复 ID 有时会起作用,最佳实践是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板