CSS 屬性選擇器 (Attribute Selectors)

屬性選擇器可以根據 HTML 元素的屬性或屬性值來選取元素。

[attr] - 存在屬性

選取帶有指定屬性的元素，不管屬性值是什麼。

[disabled] {
  opacity: 0.5;
}

<button disabled>這個按鈕會被選取</button> <button>這個按鈕不會被選取</button>

[attr="value"] - 完全相等

選取屬性值完全等於指定值的元素。

[type='text'] {
  border: 1px solid gray;
}

<input type="text" />
<!-- 會被選取 -->
<input type="email" />
<!-- 不會被選取 -->

[attr~="value"] - 包含單詞

選取屬性值中包含指定「單詞」的元素（以空格分隔的單詞列表）。

[class~='warning'] {
  color: red;
}

<p class="warning">會被選取</p>
<p class="warning message">會被選取</p>
<p class="warning-text">不會被選取（warning-text 不是獨立單詞）</p>

[attr|="value"] - 開頭相等或前綴

選取屬性值等於指定值，或以指定值開頭且後面接著連字號 - 的元素。常用於選取語言屬性。

[lang|='en'] {
  font-family: Arial, sans-serif;
}

<p lang="en">會被選取</p>
<p lang="en-US">會被選取</p>
<p lang="en-GB">會被選取</p>
<p lang="english">不會被選取</p>

[attr^="value"] - 開頭符合

選取屬性值以指定字串「開頭」的元素。

[href^='https'] {
  color: green;
}

<a href="https://example.com">會被選取（https 開頭）</a> <a href="http://example.com">不會被選取</a>

[attr$="value"] - 結尾符合

選取屬性值以指定字串「結尾」的元素。

[href$='.pdf'] {
  color: red;
}

<a href="document.pdf">會被選取（.pdf 結尾）</a> <a href="document.doc">不會被選取</a>

[attr*="value"] - 包含字串

選取屬性值中「包含」指定字串的元素。

[href*='example'] {
  text-decoration: underline;
}

<a href="https://example.com">會被選取</a>
<a href="https://www.example.org/page">會被選取</a>
<a href="https://google.com">不會被選取</a>

大小寫不敏感

在屬性選擇器的結尾加上 i，可以讓比對不區分大小寫。

[type='text' i] {
  border: 1px solid blue;
}

<input type="TEXT" />
<!-- 會被選取 -->
<input type="Text" />
<!-- 會被選取 -->
<input type="text" />
<!-- 會被選取 -->

屬性選擇器總覽

實際應用範例

外部連結樣式

/* 外部連結加上特殊樣式 */
a[href^='http'] {
  padding-right: 20px;
  background: url('external-link-icon.png') right center no-repeat;
}

/* 但排除自己網站的連結 */
a[href^='https://mysite.com'] {
  padding-right: 0;
  background: none;
}

檔案類型圖示

a[href$='.pdf']::before {
  content: '📄 ';
}
a[href$='.zip']::before {
  content: '📦 ';
}
a[href$='.jpg']::before,
a[href$='.png']::before {
  content: '🖼️ ';
}

表單輸入框樣式

input[type='text'],
input[type='email'],
input[type='password'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type='submit'] {
  background-color: blue;
  color: white;
  cursor: pointer;
}