属性选择器

CSS 属性选择器可以根据 HTML 元素的属性名称与属性值，选取特定的元素，然而随着浏览器与 CSS 的进步，甚至可以根据属性值的字首、字尾或片段来选取元素，这篇教学会介绍属性选择器的各种使用方法。

延伸阅读：HTML 元素属性

快速导览：

• 属性名称
• 精确属性值
• 部分属性值
• 不区分大小写识别子
• 将 id 或 class 作为属性选择器的注意事项

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

属性名称

单纯根据“属性名称”而形成的属性选择器，也常称为“简单属性选择器”，撰写原则和写法如下：

• 使用“两个中括号”包覆属性名称。
• 不考虑属性值，只判断属性名称。
• 属性名称“不区分大小写”。
• 属性名称“左右不需要引号”。

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 元素的语法，也时常和属性选择器搭配使用，是相当方便实用的选择器喔。

意见反馈