CSS屬性選取器 (CSS Attribute Selector)

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

  1. Element[attribute]
    物件[屬性]
  2. Element[attribute=value]
    物件[屬性=屬性值]
  3. Element[attribute~=value]
    物件[屬性~=屬性值]
  4. Element[attribute|=value]
    物件[屬性|=屬性值]
  5. Element[attribute^=value]
    物件[屬性^=屬性值]
  6. Element[attribute$=value]
    物件[屬性$=屬性值]
  7. Element[attribute*=value]
    物件[屬性*=屬性值]


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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *