Design Code 設計密碼

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

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

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

屬性選擇器

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

<code>[title]</code>
{
color:red;
}
	

屬性和值選擇器

下面的例子為title="Design Code" 的所有元素設置樣式：

<code>[title=Design Code]</code>
{
border:5px solid blue;
}
	

屬性和值選擇器- 多個值

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

<code>[title~=hello]</code> { 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 選擇器參考手冊