CSS 屬性選擇器

為帶有特定屬性的 HTML 元素設置樣式

我們可以設置帶有特定屬性或屬性值的 HTML 元素的樣式。

CSS [attribute] 選擇器

[attribute] 選擇器用于選取帶有指定屬性的元素。

下例選擇所有帶有 target 屬性的 <a> 元素；

實例

a[target] {
  background-color: yellow;
}

親自試一試

CSS [attribute="value"] 選擇器

[attribute="value"] 選擇器用于選取帶有指定屬性和值的元素。

下例選取所有帶有 target="_blank" 屬性的 <a> 元素：

實例

a[target="_blank"] { 
  background-color: yellow;
}

親自試一試

CSS [attribute~="value"] 選擇器

[attribute~="value"] 選擇器選取屬性值包含指定詞的元素。

下例選取 title 屬性包含 "flower" 單詞的所有元素：

實例

[title~="flower"] {
  border: 5px solid yellow;
}

親自試一試

上面的例子會匹配以下屬性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 選擇器

[attribute|="value"] 選擇器用于選取指定屬性以指定值開頭的元素。

下例選取 class 屬性以 "top" 開頭的所有元素：

注釋：值必須是完整或單獨的單詞，比如 class="top" 或者后跟連字符的，比如 class="top-text"。

實例

[class|="top"] {
  background: yellow;
}

親自試一試

CSS [attribute^="value"] 選擇器

[attribute^="value"] 選擇器用于選取指定屬性以指定值開頭的元素。

下例選取 class 屬性以 "top" 開頭的所有元素：

提示：值不必是完整單詞！

實例

[class^="top"] {
  background: yellow;
}

親自試一試

CSS [attribute$="value"] 選擇器

[attribute$="value"] 選擇器用于選取指定屬性以指定值結尾的元素。

下例選取 class 屬性以 "test" 結尾的所有元素：

提示：值不必是完整單詞！

實例

[class$="test"] {
  background: yellow;
}

親自試一試

CSS [attribute*="value"] 選擇器

[attribute*="value"] 選擇器選取屬性值包含指定詞的元素。

下例選取 class 屬性包含 "te" 的所有元素：

提示：值不必是完整單詞！

實例

[class*="te"] {
  background: yellow;
}

親自試一試

設置表單樣式

若需為不帶 class 或 id 的表單設置樣式，屬性選擇器會很有用：

實例

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

親自試一試

提示：請訪問我們的 CSS 表單教程，學習如何用 CSS 設置表單樣式的更多知識。

所有 CSS 屬性選擇器

選擇器 例子 例子描述
[attribute] [target] 選擇帶有 target 屬性的所有元素。
[attribute=value] [target=_blank] 選擇帶有 target="_blank" 屬性的所有元素。
[attribute~=value] [title~=flower] 選擇帶有包含 "flower" 一詞的 title 屬性的所有元素。
[attribute|=value] [lang|=en] 選擇帶有以 "en" 開頭的 lang 屬性的所有元素。
[attribute^=value] a[href^="https"] 選擇其 href 屬性值以 "https" 開頭的每個 <a> 元素。
[attribute$=value] a[href$=".pdf"] 選擇其 href 屬性值以 ".pdf" 結尾的每個 <a> 元素。
[attribute*=value] a[href*="codew3c"] 選擇其 href 屬性值包含子串 "codew3c" 的每個 <a> 元素。

延伸閱讀

課外書：CSS 屬性選擇器詳解