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 specifiedword.

如下例，将选择所有含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;
}