在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>