屬性選擇器
基本 [attr]
符合屬性名稱
.item[title] {
color: red;
}
<div class="block">
<div class="item" title="1">1</div>
<div class="item" title="2">2</div>
<div class="item">3</div>
</div>
指定值 [attr='value']
符合屬性名稱與數值
.item[title='1'] {
color: red;
}
<div class="block">
<div class="item" title="1">1</div>
<div class="item" title="2">2</div>
<div class="item">3</div>
</div>
包含值 [attr*='value']
符合屬性名稱與包含數值(模糊比對)
.item[title*='1'] {
color: red;
}
<div class="block">
<div class="item" title="123">1</div>
<div class="item" title="213">2</div>
<div class="item">3</div>
</div>
開頭值 [attr^='value']
符合屬性名稱與數值開頭
.item[title^='1'] {
color: red;
}
<div class="block">
<div class="item" title="123">1</div>
<div class="item" title="213">2</div>
<div class="item">3</div>
</div>
結尾值 [attr$='value']
符合屬性名稱與數值最後
.item[title$='1'] {
color: red;
}
<div class="block">
<div class="item" title="123">1</div>
<div class="item" title="251">2</div>
<div class="item">3</div>
</div>
多值 [attr~='value']
符合屬性名稱與其中一個數值
.item[title~='888'] {
color: red;
}
<div class="block">
<div class="item" title="123 888">1</div>
<div class="item" title="213">2</div>
<div class="item" title="888">3</div>
</div>