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

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

在任何情况下，即使对于css而言，类也更好，因为ID会在元素上添加更大的权重，例如，如果要覆盖css属性，则无法通过添加类来实现它。

一个例子是：

#header {
 font-size: 1.5rem;
}

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

所以总结一下你的代码是可以的，它会在获得渲染时在页面上只有一个带有ID的元素。

Answer 2

我会这样走：

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

Answer 3

如果只渲染其中一个“h2”，那么由于你的代码，它与仅写入其中一个没有区别，这两个“h2”无法在DOM中呈现

如果在具有相同ID的DOM中呈现任何两个元素，则唯一会导致问题

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