CSS选择器（5）——属性选择器

在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过ID属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器，这些选择器可基于元素的属性匹配元素，而CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配定位元素。

属性选择器

E[attr]

选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素。

为带有 target 属性的 <a> 元素设置样式：

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

E[attr = val]

选择匹配具有属性attr的E元素，并且attr的属性值为val，完全匹配。

为 target="_blank" 的 <a> 元素设置样式：

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

E[attr |= val]

选择匹配具有属性attr的E元素，并且该属性值具有val或者以val-开头的单词。

[lang|=en]
{ 
background-color:yellow;
}

<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
//匹配不上下面这个
<p lang="en-gb en-ab">Ello!</p>

E[attr~=val]

选择匹配具有属性attr的E元素，并且该元素的值中包含val单词，常用在多属性值当中。

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

<img src="/i/eg_tulip.jpg" title="tulip flower" />

E[att*=val]

选择匹配具有属性attr的E元素，并且属性值的任意位置包含val字符串

div[class*="test"]
{
background:#ffff00;
}

<div class="first_test">第一个 div 元素。</div>
<div class="secondtest">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>

E[attr^=val]

选择匹配具有属性attr的E元素，并且属性值以val开头。

[class^="test"]
{
background:#ffff00;
}

<div class="test_d">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="testabc">这是段落中的文本。</p>

E[attr$=val]

选择匹配具有属性attr的E元素，并且属性值以val结尾。

div[class$="test"]
{
background:#ffff00;
}

<div class="first_test">第一个 div 元素。</div>
<div class="secondtest">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>