之前有寫過css 選取器的文章,這一篇再針對其中的屬性選取器來寫詳細一點的介紹。
屬性選取器的用法有以下幾種:
- Element[attribute]
物件[屬性] - Element[attribute=value]
物件[屬性=屬性值] - Element[attribute~=value]
物件[屬性~=屬性值] - Element[attribute|=value]
物件[屬性|=屬性值] - Element[attribute^=value]
物件[屬性^=屬性值] - Element[attribute$=value]
物件[屬性$=屬性值] - Element[attribute*=value]
物件[屬性*=屬性值]
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>