屬性選擇器

基本 [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>

demo

指定值 [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>

demo

包含值 [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>

demo

開頭值 [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>

demo

結尾值 [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>

demo

多值 [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>

demo