對帶有指定屬性的 HTML 元素設置樣式。

可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。

注釋：Internet Explorer 7 （以及更高版本）在規定了 !DOCTYPE 的情況下支持屬性選擇器。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; } 

相關內容

如果您需要更深入地學習關于屬性選擇器的知識，請閱讀 W3School 的高級教程：CSS 屬性選擇器詳解。