CSS屬性選取器 (CSS Attribute Selector)

之前有寫過css 選取器的文章，這一篇再針對其中的屬性選取器來寫詳細一點的介紹。
屬性選取器的用法有以下幾種：

Element[attribute]
物件[屬性]
這樣的寫法物件必需帶有指定的屬性才可以

div[ailgn] {
	color: red;
}

<div align="center">紅色字</div>
<div align="center">紅色字</div>
<div height="300px">預設字</div>

Element[attribute=value]
物件[屬性=屬性值]
這樣的寫法物件必需帶有指定的屬性並且符合指定的屬性值才可以

div[ailgn=center] {
	color: red;
}

<div align="center">紅色字</div>
<div align="center">紅色字</div>
<div align="right">預設字</div>

Element[attribute~=value]
物件[屬性~=屬性值]
這樣的寫法是屬性值要包含關鍵字(字串，前/後空格的)

p[class~=aa] {
	color: red;
}

<p class="aa">紅色字</p>
<p class="aa bb">紅色字</p>
<p class="bb">預設字</p>

Element[attribute|=value]
物件[屬性|=屬性值]
這樣的寫法是屬性值要包含關鍵字串(前/後空格的，或是後面接”-“的)

p[class|=aa] {
	color: red;
}

<p class="aa">紅色字</p>
<p class="aa-bb">紅色字</p>
<p class="bb">預設字</p>

Element[attribute^=value]
物件[屬性^=屬性值]
這樣的寫法是屬性值開頭要包含指定的關鍵字元

p[class^=aa] {
	color: red;
}

<p class="aa">紅色字</p>
<p class="aabb">紅色字</p>
<p class="abb">預設字</p>
<p class="bb">預設字</p>

Element[attribute$=value]
物件[屬性$=屬性值]
這樣的寫法是屬性值結尾要包含指定的關鍵字元

p[class$=aa] {
	color: red;
}

<p class="baa">紅色字</p>
<p class="bbaa">紅色字</p>
<p class="aa">紅色字</p>
<p class="bb">預設字</p>

Element[attribute*=value]
物件[屬性*=屬性值]
這樣的寫法是屬性值要包含指定的關鍵字元

p[class*=aa] {
	color: red;
}

<p class="baa">紅色字</p>
<p class="bbaa">紅色字</p>
<p class="aa">紅色字</p>
<p class="baab">紅色字</p>

JA-Anything