CSS Attribute Selectors

Attribute Selector

可以對那些擁有指定屬性或屬性值的HTML元素樣式化設置。

Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified.

[attribute] Selector

The [attribute] selector 選擇凡是擁有這個 attribute 的元素。如下例，選擇所以含 target 這個屬性的<a>元素

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

[attribute=value] Selector

The [attribute=value] selector 選擇那些不僅包含 attribute 的元素，而且該屬性值等於value纔行。

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

[attribute~=value] Selector

The [attribute~=value] selector 選擇那些含 attribute 的元素，並且其屬性值containing a specified word.

如下例，將選擇所有含 title 屬性的元素，title 的值可以是一系列由空格隔開的單詞，其中包含單詞 flower。

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

具體地，match with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

[attribute*=value] Selector

The [attribute*=value] selector選擇那些含 attribute 的元素，且contains a specified value. does not has to be a whole word!  

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

與上面區別，只要屬性值裏包含te即可，不必是一個完整的單詞。

[attribute|=value] Selector

The [attribute|=value] selector 選擇那些包含 attribute 的元素， 且以指定的值開始 starting with the specified value.

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

Note: The value has to be a whole word 必須是完整的單詞, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! 

[attribute^=value] Selector

The [attribute^=value] selector 選擇那些含 attribute 的元素，且 begins with a specified value. 區別於上例，does not have to be a whole word! 

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

只要屬性值以top開始即可，包含 [attribute|=value] 選擇器的結果，因此範圍比上面的選擇器更廣。

[attribute$=value] Selector

The [attribute$=value] selector選擇那些含 attribute 的元素，且以指定的值結束 ends with a specified value. does not have to be a whole word! 

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

要求不嚴格，只要屬性值的是以 test 結尾即可。

CSS 屬性選擇器可以用來個性化表格而無需使用class或ID

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

input[type="submit"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}