CSS選擇器（5）——屬性選擇器

xthought發表於2017-11-17
CSS

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

相關文章