點燈坊

學而時習之,不亦悅乎

CSS 之 Attribute Selector

Sam Xiao's Avatar 2019-05-15

僅管是相同 Tag 的 HTML Element,,只要其 Attribute 的 Value 不一樣,就能使用 Attribute Selector 描述該 Element。

Version

CCS 3

Attribute Selector

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Attribute Selector</title>
  <style>
    div[title="sam"] {
      font-size: 30px;
      color: #ff0000;
    }
  </style>
</head>
<body>
  <div title="sam">Sam</div>
  <div title="mary">Mary</div>
</body>
</html>

14 行

<div title="sam">Sam</div>
<div title="mary">Mary</div>

SamMary 都使用 <div>,該如合描述使用 title="sam"<div> 呢 ?

第 7 行

div[title="sam"] {
  font-size: 30px;
  color: #ff0000;
}

既然 <div> 使用了 title attribute,CSS 若要以 attribute selector 描述 <div>,selector 為 [attribute="value"]

attr000

Conclusion

  • Attribute selector 使用 [attribute="value"] 描述,可套用在相同 tag 的不同 element