詳解CSS 屬性選取器

對帶有指定屬性的 HTML 元素設定樣式。可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。本文主要給大家介紹了css屬性選取器的相關知識，感興趣的朋友一起看看吧，希望能協助到大家。

注釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選取器。在 IE6 及更低的版本中，不支援屬性選擇。

屬性選取器

下面的例子為帶有 title 屬性的所有元素設定樣式：

[title]{color:red;}

屬性和值選取器

下面的例子為 title="W3School" 的所有元素設定樣式：

[title=W3School]{border:5px solid blue;}

屬性和值選取器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字號分隔的屬性值：

[lang|=en] { color:red; }

設定表單的樣式

屬性選取器在為不帶有 class 或 id 的表單設定樣式時特別有用：

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

CSS 選取器參考手冊

選取器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。