屬性選擇器

CSS 屬性選擇器可以根據 HTML 元素的屬性名稱與屬性值，選取特定的元素，然而隨著瀏覽器與 CSS 的進步，甚至可以根據屬性值的字首、字尾或片段來選取元素，這篇教學會介紹屬性選擇器的各種使用方法。

延伸閱讀：HTML 元素屬性

快速導覽：

• 屬性名稱
• 精確屬性值
• 部分屬性值
• 不區分大小寫識別子
• 將 id 或 class 作為屬性選擇器的注意事項

屬性名稱

單純根據「屬性名稱」而形成的屬性選擇器，也常稱為「簡單屬性選擇器」，撰寫原則和寫法如下：

• 使用「兩個中括號」包覆屬性名稱。
• 不考慮屬性值，只判斷屬性名稱。
• 屬性名稱「不區分大小寫」。
• 屬性名稱「左右不需要引號」。

h1[name] {color: red;}  /* 具有 name 屬性的 h1 元素會是紅色文字 */
a[href] {color: blue;}  /* 具有 href 屬性的 a 元素會是藍色文字 */
a[HREF] {color: blue}   /* 屬性名稱不區分大小寫，效果等同上方 a[href] */

如果元素具有「多個屬性」，可以使用「串連」的方式連接多個屬性名稱。

h1[name][title] {color: red;}  
/* 同時具有 name、title 屬性的 h1 元素會是紅色文字 */

a[href][target][title] {color: blue;}
/* 同時具有 href、target、title 屬性的 a 元素會是藍色文字 */

精確屬性值

由於不同的元素時常會具有同樣的屬性名稱，因此可進一步運用「精確的屬性值」作為選取條件，撰寫原則和寫法如下：

• 使用「雙引號或單引號」包覆屬性值 ( 也可以不使用，但部分特殊符號需要跳脫字元且容易出錯，建議一率使用 )。
• 屬性值「區分大小寫」。
• 屬性值「包含空白」。

<!-- HTML 程式碼 -->
<h1 name="oxxo">oxxo.studio</h1>
<h2 note="hello world!!">hello</h2>
<a href="index.html">超連結 1</a>
<br>
<a href="INDEX.html">超連結 2</a>

<!-- CSS 程式碼 -->
<style>
  h1[name="oxxo"] {color: red;}           /* 具有 name 屬性為 oxxo 的 h1 元素會是紅色文字 */
  h2[note="hello world!!"] {color: gray;} /* 具有 note 屬性為 hello world!! 的 h2 元素會是灰色文字 */
  a[href="index.html"] {color: blue;}     /* 具有 href 屬性為 index.html 的 a 元素會是藍色文字 */
  a[href="INDEX.html"] {color: blue}      /* 具有 href 屬性為 INDEX.html 的 a 元素會是綠色文字 */
</style>

由於屬性值會比對「空白字元」，不同數量的空白字元就會對應不同的選取器，舉例來說「hello world」和「hello world」就是不同的兩個屬性值，如果屬性值多了幾個空白，就不會套用選擇器的樣式。

<!-- HTML 程式碼 -->
<h2 note="hello world!!">hello 1</h2>
<h2 note="hello    world!!">hello 2</h2>

<!-- CSS 程式碼 -->
<style>
  h2[note="hello world!!"] {color: red;} /* 屬性值 hello world!! 的 h2 元素是紅色文字 */
</style>

部分屬性值

部分屬性值會透過簡單的「字串比對」方式，判斷下列幾種部分屬性值：

空白分隔並具有屬性值

使用「~」符號，寫法為「[name~="oxxo"]」，使用後會判斷是否具有指定屬性名稱，以及屬性值是否具有「空白分隔」以及指定的數值，下方的範例執行後，根據屬性選擇器的規則，第一行和第四行的文字會變成紅色。

<!-- HTML 程式碼 -->
<h2 name="apple oxxo banana">apple oxxo banana</h2>
<h2 name="apple-oxxo-banana">apple-oxxo-banana</h2>
<h2 name="appleoxxobanana">appleoxxobanana</h2>
<h2 name="apple banana oxxo">apple banana oxxo</h2>

<!-- CSS 程式碼 -->
<style>
  [name~="oxxo"] {color: red;}
</style>

包含屬性值

使用「*」符號，寫法為「[name*="oxxo"]」，使用後會判斷是否具有指定屬性名稱，以及屬性值是否「包含」指定的數值，下方的範例執行後，根據屬性選擇器的規則，因為全部屬性值都有 oxxo，所以都會變成紅色。

<!-- HTML 程式碼 -->
<h2 name="apple oxxo banana">apple oxxo banana</h2>
<h2 name="apple-oxxo-banana">apple-oxxo-banana</h2>
<h2 name="oxxoappleoxxobanana">appleoxxobanana</h2>
<h2 name="apple banana oxxo">apple banana oxxo</h2>

<!-- CSS 程式碼 -->
<style>
  [name*="oxxo"] {color: red;}
</style>

開頭等於屬性值

使用「^」符號，寫法為「[name^="oxxo"]」，使用後會判斷是否具有指定屬性名稱，以及屬性值的「開頭」是否「等於」指定的數值，下方的範例執行後，根據屬性選擇器的規則，第二和第三行會變成紅色。

<!-- HTML 程式碼 -->
<h2 name="apple oxxo banana">apple oxxo banana</h2>
<h2 name="oxxo-apple-banana">oxxo-apple-banana</h2>
<h2 name="oxxoapplebanana">oxxoappleoxxobanana</h2>
<h2 name="apple banana oxxo">apple banana oxxo</h2>

<!-- CSS 程式碼 -->
<style>
  [name^="oxxo"] {color: red;}
</style>

結尾等於屬性值

使用「$」符號，寫法為「[name$="oxxo"]」，使用後會判斷是否具有指定屬性名稱，以及屬性值的「結尾」是否「等於」指定的數值，下方的範例執行後，根據屬性選擇器的規則，只有第四行會變成紅色。

<!-- HTML 程式碼 -->
<h2 name="apple oxxo banana">apple oxxo banana</h2>
<h2 name="oxxo-apple-banana">oxxo-apple-banana</h2>
<h2 name="oxxoapplebanana">oxxoappleoxxobanana</h2>
<h2 name="apple banana oxxo">apple banana oxxo</h2>

<!-- CSS 程式碼 -->
<style>
  [name^="oxxo"] {color: red;}
</style>

等於屬性值、或開頭為屬性值加破折號

使用「|」符號，寫法為「[name|="oxxo"]」，使用後會判斷是否具有指定屬性名稱，以及屬性值*完全等於指定數值，或開頭使用指定數值加上「破折號」，下方的範例執行後，根據屬性選擇器的規則，第二和第五行會變成紅色。

<!-- HTML 程式碼 -->
<h2 name="apple oxxo banana">apple oxxo banana</h2>
<h2 name="oxxo-apple-banana">oxxo-apple-banana</h2>
<h2 name="oxxoapplebanana">oxxoappleoxxobanana</h2>
<h2 name="apple banana oxxo">apple banana oxxo</h2>
<h2 name="oxxo">oxxo</h2>

<!-- CSS 程式碼 -->
<style>
  [name|="oxxo"] {color: red;}
</style>

不區分大小寫識別子

屬性選擇器有個特別的功能，稱作「不區分大小寫識別子」，只需要在屬性值後方加上「i」即可，寫法為「[name="oxxo" i]」，使用後就會在比對屬性值時，忽略英文大小寫，下方的範例執行後，不論屬性值英文大小寫為何，都會套用紅色文字的樣式。

<!-- HTML 程式碼 -->
<h2 name="abcdefg">abcdefg</h2>
<h2 name="ABCDEFG">ABCDEFG</h2>
<h2 name="ABCdefg">ABCdefg</h2>

<!-- CSS 程式碼 -->
<style>
  [name="abcdefg" i] {color: red;}
</style>

將 id 或 class 作為屬性選擇器的注意事項

雖然 id 和 class 也屬於屬性的一種，但 id 和 class 通常都是使用自己的選取器，不會特別去使用屬性選取器，但如果真的有需求，則需要注意下列幾個重點：

• 分隔符號差異

  如果有多個 class 名稱，class 選擇器使用「.」開頭區分不同名稱，屬性選擇器則用「空白」分隔不同名稱。

  .apple.banana {color: red;}
  
  /* 改寫成屬性選擇器 */
  
  [class="apple banana"] {color: red;}
  

• 權重差異

  使用一個屬性選擇器只會增加「0-1-0」的權重，但只要使用一個 id 選擇器就會增加「1-0-0」的權重，兩者對樣式的影響非常巨大，下方的範例執行後，由於權重的影響，完全不會顯示屬性選擇器產生的樣式，最後只會呈現紅色文字。

  參考：CSS 選擇器的優先順序 ( 權重 )

  .apple.banana {color: red;}  /* 權重 0-2-0 */
  #oxxo {color: red;}          /* 權重 1-0-0 */
  
  /* 下方用同樣的方式寫成屬性選擇器，雖然擺在後方，但因為權重較小，完全不會執行 */
  
  [class="apple banana"] {color: red;}  /* 權重 0-1-0 */
  [id="oxxo"] {color: red;}             /* 權重 0-1-0 */
  

  

小結

雖然屬性選擇器不如 元素、id 和 class 選擇器常用，但相對可以操作的靈活性卻非常大，透過屬性值的簡單字串比對，就能在不需要太多額外選擇器的輔助下，輕鬆選取到特定的物件，此外，許多 JavaScript 操控 HTML 元素的語法，也時常和屬性選擇器搭配使用，是相當方便實用的選擇器喔。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～