僅管是相同 Tag，只要其 Attribute 的 Value 不一樣，就能使用 Attribute Selector 選擇該 Tag。
Version
CSS 3
Class Attribute
想選擇所有使用 class attribute 的 tag。
<template>
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[class] {
color: #f00;
}
</style>
第 2 行
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
Oomusou 使用 nickname class，Sam 則使用 first-name class，而 Xiao 並沒有使用任何 class。
第 8 行
[class] {
color: red;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中具有 class attribute。
Custom Attribute
其實 attribute selector 不只能用在 class attribute 而已，也能用在自訂 attribute。
<template>
<div my-name="nickname">Oomusou</div>
<div my-name="first-name">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[my-name] {
color: #f00;
}
</style>
第 2 行
<div my-name="nickname">Oomusou</div>
<div my-name="first-name">Sam</div>
<div>Xiao</div>
Oomusou 與 Sam 使用了自訂的 my-name attribute，而 Xiao 則有沒使用任何 attribute。
第 8 行
[my-name] {
color: #f00;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中具有 my-name attribute。
Class Attribute on Tag
Attribute selector 也可只用在指定 tag 下。
<template>
<div class="nickname">Oomusou</div>
<p class="first-name">Sam</p>
<div>Xiao</div>
</template>
<style scoped>
p[class] {
color: #f00;
}
</style>
第 2 行
<div class="nickname">Oomusou</div>
<p class="first-name">Sam</p>
<div>Xiao</div>
Oomusou 與 Sam 都使用了 class attribute，唯 Oomusou 在 <div> 下，而 Sam 在 <p> 下。
第 8 行
p[class] {
color: #f00;
}
若要選擇 Sam，可選擇所有 tag 中為 <p> 並使用 class attribute，syntax 為 [] 前搭配指定 tag。
[attribute=”value”]
Attribute selector 可搭配各種 operator 使用，如以 = 選擇 attribute 等於 指定 value。
<template>
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[class="nickname"] {
color: #f00;
}
</style>
第 2 行
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
Oomusou 使用 nickname class，而 Sam 使用 first-name class。
第 8 號
[class="nickname"] {
color: #f00;
}
若要選擇 Oomusou，可選擇所有 tag 中 class attribute 為 nickname。
[attribute~=”value”]
以 ~= 選擇 attribute 包含 指定 value。
<template>
<div class="name nickname">Oomusou</div>
<div class="name first-name">Sam</div>
<div class="last-name">Xiao</div>
</template>
<style scoped>
[class~="name"] {
color: #f00;
}
</style>
第 2 行
<div class="name nickname">Oomusou</div>
<div class="name first-name">Sam</div>
<div class="last-name">Xiao</div>
Oomusou 與 Sam 擁有多個 class，但都有 name class。
第 8 行
[class~="name"] {
color: #f00;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中 class attribute 包含 name class。
[attribute|=”value”]
以 |= 選擇 attribute 以指定 value 開頭，其後接著 hyphen -。
<template>
<div class="top-header">Oomusou</div>
<div class="top-text">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[class|="top"] {
color: #f00;
}
</style>
第 2 行
<div class="top-header">Oomusou</div>
<div class="top-text">Sam</div>
<div>Xiao</div>
Oomusou 與 Sam 的 class 都以 top- 開頭。
第 8 行
[class|="top"] {
color: #f00;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中 class attribute 以 top 開頭，且其後為 -。
[attribute^=”value”]
以 ^= 選擇 attribute 以指定 value 開頭。
<template>
<div class="topheader">Oomusou</div>
<div class="toptext">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[class^="top"] {
color: #f00;
}
</style>
第 2 行
<div class="topheader">Oomusou</div>
<div class="toptext">Sam</div>
<div>Xiao</div>
Oomusou 與 Sam 的 class 都以 top 開頭。
第 8 行
[class^="top"] {
color: #f00;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中 class attribute 以 top 開頭。
|=vs.^=
- 以指定 value 開頭，接著為
-- 以指定 value 開頭即可
[attribute$=”value”]
以 $= 選擇 attribute 以指定 value 結尾。
<template>
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
</template>
<style scoped>
[class$="name"] {
color: #f00;
}
</style>
第 2 行
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div>Xiao</div>
Oomusou 與 Sam 的 class 都以 name 結尾。
第 8 行
[class$="name"] {
color: #f00;
}
若要選擇 Oomusou 與 Sam，可選擇所有 tag 中 class attribute 以 name 結尾。
[attribute*=”value”]
以 *= 選擇 attribute 包含部分 value 即可。
<template>
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div class="name">Xiao</div>
</template>
<style scoped>
[class*="name"] {
color: #f00;
}
</style>
第 2 行
<div class="nickname">Oomusou</div>
<div class="first-name">Sam</div>
<div class="name">Xiao</div>
Oomusou、Sam 與 Xiao 的 class 中，都包含 name 字串。
第 8 行
[class*="name"] {
color: #f00;
}
若要選擇 Oomusou 、 Sam 與 Xiao，可選擇所有 tag 中 class attribute 包含 name 字串。
Conclusion
- Attribute selector 主要用在
不等於，可搭配各種 operator 判斷
Reference
MDN, Attribute selector
w3schools.com, CSS Attribute Selectors