CSS選擇器介紹( 2 )

Sandy

Published in

UI/UX練功坊

6 min readNov 21, 2018

css屬性選擇器介紹

● 屬性選擇器(Simple attribute selector)：

元素名稱[屬性名稱]

選擇具有某html屬性的元素標籤
例如下列範例的意思就是選擇具有href屬性的a元素

a[href] { color: #ff0000; }

→ 看Demo範例1

假如想要指定多個屬性的話，只需要接續寫出[屬性名稱]就可以了
寫成 — 元素名稱[屬性名稱][屬性名稱]
例如下列範例就是選擇同時具有href屬性和title屬性的a標籤的意思

a[href][title] { color: #00ff00; }

→ 看Demo範例2

● 準確屬性選擇器(Exact attribute value selector)：

元素名稱[屬性名稱=“屬性值”]

只選擇具有特定屬性值的元素標籤
例如下列範例的意思就是選擇target屬性值為_blank的a元素

a[target="_blank"] { color: #00ffff; }

→ 看Demo範例3

與前一個範例相同，也可以指定多個特定屬性值，只需要接續寫出就可以了寫成 — 元素名稱[屬性名稱=“屬性值”][屬性名稱=“屬性值”]
下列範例是選擇同時有 href屬性為https://www.google.com.tw/ 和 target屬性值為_blank 的a標籤

a[href="https://www.google.com.tw/"][target="_blank"] { color: #cccccc; }

→ 看Demo範例4

CSS3 新增的部份屬性選擇器(Partial value attribute selector)
註：IE9 以上支援

● 元素名稱[屬性名稱^=“特定開頭”]：
選擇具有特定屬性，且屬性值是以“特定開頭”的元素標籤
例如下列範例就是具有class名稱開頭為green的p元素會變成綠色
發現結果第三行是黑色，第四行才是綠色
也就是說不只單字的開頭，還要放在第一個值，這個寫法才會生效

<style type="text/css">
    p[class^="green"] { color: #34bf49; }
</style>

<div>
    <p class="greenText">我是綠色我是綠色我是綠色</p>
    <p class="green-text">我是綠色我是綠色我是綠色</p>
    <p class="Bigger greenText">我不是綠色</p>
    <p class="greenText Bigger">我是綠色我是綠色我是綠色</p>
    <p class="green">我是綠色我是綠色我是綠色</p>
    <p class="lightgreen-text">我是淺綠色</p>
</div>

→ 看Demo範例5

● 元素名稱[屬性名稱$=“特定結尾”]：
選擇具有特定屬性，且屬性值是以“特定結尾”的元素標籤
例如下列範例就是具有class名稱結尾為purple的p元素會變成紫色
我們發現第三行仍然是黑色沒有變成紫色
也就是說不只單字的結尾，還要放在最後一個值，這個寫法才會生效

<style type="text/css">
    p[class$="purple"] { color: #7d3f98; }
</style>

<div>
    <p class="textpurple">我是紫色我是紫色我是紫色</p>
    <p class="Bigger textpurple">我是紫色我是紫色我是紫色</p>
    <p class="textpurple Bigger">我是黑色我是黑色</p>
    <p class="purple">我是紫色我是紫色我是紫色</p>
</div>

→ 看Demo範例6

● 元素名稱[屬性名稱*=“特定字眼”]：
選擇具有特定屬性，且屬性值包含“特定字眼”的元素標籤
例如下列範例就是選擇所有class名稱包含big(不論位置在開頭/中間/結尾)的元素標籤都適用

*[class*="big"] { border: 1px solid #333; }

→ 看Demo範例7

● 元素名稱[屬性名稱~=“特定單詞”]：
當元素的屬性值可用空白隔開設定多個值時，若其中有一個值為特定單詞(一定要完全符合)，則套用樣式
我們可以發現下列範例的最後三行才是藍色文字，其他都不符合套用規則

<style type="text/css">
    *[class~="blue"] { color: #037ef3; }
</style>

<div>
    <p class="textblue">我不是blue我不是blue</p>
    <p class="Bigger text-blue">我不是blue我不是blue</p>
    <p class="bluetext Bigger">我不是blue我不是blue</p>
    <p class="blue">我是blue我是blue我是blue</p>
    <p class="blue Bigger">我是blue我是blue我是blue</p>
    <p class="Bigger blue">我是blue我是blue我是blue</p>
</div>

→ 看Demo範例8

CSS3 新增的特定屬性選擇器(Particular attribute selector)
註：IE9 以上支援

● 元素名稱[屬性名稱|=“特定開頭”]：
以下列範例來說，當元素為p，並具有class屬性，且class屬性的值為red、red-或以red-開頭時，則套用樣式
若具class屬性，以red開頭，但是值不為red，則不會套用樣式
此時寫成元素名稱[屬性名稱^=“特定開頭”]就可適用，但要放在第一個值

<style type="text/css">
    p[class|="red"] { color: Red; }
</style>

<div>
    <p class="red">我是Red我是Red我是Red</p>
    <p class="red-">我是Red我是Red我是Red</p>
    <p class="red-text">我是Red我是Red我是Red</p>
    <p class="redtext">我不是Red我不是Red</p>
    <p class="Textred">我不是Red我不是Red</p>
</div>

→ 看Demo範例9

雖然css3新增的屬性選擇器很方便，但是在使用時務必要考慮好class的命名，否則會發生很多重複選取的情形，class的套用就會很雜亂
再複習一次剛剛說的：
e[attr^=“val”] 指定特定屬性值開頭，且要放在第一個值
e[attr$=“val”] 指定特定屬性值結尾，且要放在最後一個值
e[attr*=“val”] 指定屬性值包含特定字眼，位置與命名方式不拘
e[attr~=“val”] 指定特定單詞，整個值要完全相同，順序不拘
e[attr|=“val”] 指定特定屬性值開頭，但要符合val-開頭的命名方式

CSS選擇器介紹( 2 )

Written by Sandy