如果在DOM中仅呈现一个HTML元素，则多个具有相同ID的元素

Question

如果仅在dom中呈现一个id元素，您可以有多个相同的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

在任何情况下，即使类对CSS来说也更好，因为ID会增加元素的权重，例如，如果您想覆盖css属性，则仅通过添加一个css就无法实现课。

一个例子是：

#header {
 font-size: 1.5rem;
}

之后，您只想在一个标头元素上覆盖css，而不在另一个标头元素上覆盖css，向该元素添加类将不会覆盖该元素的字体大小。我希望我对这个例子很清楚。

所以总结您的代码是可以的，当呈现代码时，它只会在页面上获得一个具有ID的元素。

Answer 3

如果仅渲染其中一个“ h2”，则与仅写入其中之一没有区别 由于您的代码的原因，两个“ h2”将无法在DOM中呈现

如果在DOM中使用相同的ID渲染了任何两个元素，则唯一的问题会导致问题

在这种情况下，如果您尝试选择其中之一或对其应用任何js，它将选择在DOM上呈现的第一个元素