不同的 HTML 元素可以擁有相同的 ID 嗎？

不，我們不能在 HTML 中為不同的元素使用相同的 ID。ID 在整個 HTML 頁面中必須是唯一的。即使官方 HTML 標準也建議這樣做。

使用唯一的 id 屬性

示例

讓我們看一個例子。在這裡，我們使用了 id 屬性。

<!DOCTYPE html>
<html>
<head>
   <style>
      #myHeader {
         border: 3px solid violet;
         background-color: blue;
         padding: 50px;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 id="myHeader">
      Heading One
   </h1>
   <p>This is a text outside.</p>
</body>
</html>

輸出

顯示不同的 ID

示例

另一個顯示四個不同唯一 ID 的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         width: 100%;
         font-size: 10px;
         text-align: center;
      }
      #left {
         float: left;
         width: 100px;
         border: 2px solid green;
      }
      #right {
         float: right;
         width: 100px;
         border: 2px solid orange;
      }
      #center {
         margin: 0 auto;
         width: 100px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="left">
         <h1>Left</h1>
      </div>
      <div id="right">
         <h1>Right</h1>
      </div>
      <div id="center">
         <h1>Center</h1>
      </div>
   </div>
</body>
</html>

輸出

更新於: 2022年11月1日

422 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告