點燈坊

學而時習之,不亦悅乎

CSS 之 ID Selector

Sam Xiao's Avatar 2019-05-15

CSS 也可以直接以 ID 描述 Element,這種方式速度最快,但因為 ID 不能重複,只能套用在單一 Element。

Version

CCS 3

ID Selector

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ID Selector</title>
  <style>
    #name {
      font-size: 30px;
      color: #ff0000;
    }
  </style>
</head>
<body>
  <div id="name">Sam</div>
</body>
</html>

14 行

<div id="name">Sam</div>

HTML 部分有 <div>,HTML 部分有 <div>,其 idname

第 7 行

#name {
  font-size: 30px;
  color: #ff0000;
}

既然 <div> 使用了 name id,CSS 部分若要以 ID selector 描述 <div>,selector 為 # + ID 名稱

id000

Conclusion

  • ID selector 使用 # + id 名稱 描述,只能套用單一 HTML element,且 priority 太高,實務上較少使用