多个 HTML 个相同的 id 元素，如果在 DOM 中只呈现一个

Question

如果在 dom 中只呈现一个，是否可以有多个相同的 id 元素？例如在 Laravel 你可以有：

 @if (Route::has('login'))
   @auth
     <h2 id='header'>Dashboard</h2>
 @else
     <h2 id='header'>Sign up</h2> 
   @endauth
 @endif

我意识到同一元素上的多个 id 是不好的做法，但从技术上讲，在这种情况下，DOM 中只会呈现一个元素，就浏览器而言，它只会检测到其中一个元素，那么它会对 javascript 等产生任何不良影响吗？不过，它可以简化 css。
我不打算在我的项目中使用它，只是好奇。

Answer 1

我会走这条路：

@if (Route::has('login'))
  <h2 id="header">{{ Auth::check() ? 'Dashboard' : 'Sign up' }}</h2>
@endif

Answer 2

在任何情况下，class 甚至对于 css 都更好，因为 ID 在元素上增加了更大的权重，例如，如果您想覆盖 css 属性你将无法通过仅添加 class.

来实现它

例如：

#header {
 font-size: 1.5rem;
}

稍后您想覆盖一个 header 元素上的 css 而不是另一个元素上的 css，向该元素添加 class 不会覆盖 font-size 的元素。我希望我对这个例子很清楚。

总而言之，您的代码没问题，它在呈现时只会在页面上获得一个带有 ID 的元素。

Answer 3

如果只渲染其中一个"h2"，这与只写其中一个没有区别由于您的代码，两个 "h2" 无法在 DOM

中呈现

如果在 DOM 中呈现具有相同 ID

的任意两个元素，唯一会导致问题的是

在这种情况下，如果您尝试 select 其中一个或向它们应用任何 js，它将 select 第一个元素呈现在 DOM

Multiple HTML same id elements if only one is rendered in the DOM