attribute selector 屬性指標 (css selectors) [2*]

css attribute selectors (css 屬性指標)

  1. selector[att]
    指出具有 att 屬性的元素。
    語法實例
    html 片段
    <dfn lang="en">selector</dfn>
<label for="mail">email</label>
    css selectors
    dfn[lang]
label[for]
    jQuery 物件語法
    jQuery('[att]') 或 $('[att]')
例： $('label[for]')
  2. selector[att=val]
    指出具有 att 屬性且屬性值與 val 完全相符的元素。
    語法實例
    html 片段
    <input type="text"/>
<button type="reset">清除</button>
<a href="http://www.w3.org/" rel="external">W3C</a>
    css selectors
    input[type="text"]
button[type="reset"]
a[rel="external"]
    jQuery 物件語法
    jQuery('[att=val]') 或 $('[att=val]')
例： $('input[type="text"]')
  3. selector[att^=val] (此項為 css 3)
    指出具有 att 屬性且屬性值字首 (由開端起算的字串) 與 val 完全相符的元素。 val 為空白時，不會指出任何元素。
    語法實例
    html 片段
    <body class="ch41">…<body class="ch42">…<body class="ch43">…
<object type="image/png" data="photo.png">…<object type="image/jpg" data="photo.jpg">…
<a href="http://www.w3.org/">…<a href="http://www.w3.org/Style/CSS/">…<a href="http://www.w3.org/html/">…
    css selectors
    body[class^="ch4"]
object[type^="image/"]
a[href^="http://www.w3.org"]
    jQuery 物件語法
    jQuery('[att^=val]') 或 $('[att^=val]')
例： $('body[class^="ch4"]')
  4. selector[att$=val] (此項為 css 3)
    指出具有 att 屬性且屬性值字尾 (由末端回算的字串) 與 val 完全相符的元素。 val 為空白時，不會指出任何元素。
    語法實例
    html 片段
    <div class="st" id="st1-2">…<div class="st" id="st2-2">…<div class="st" id="st3-2">…
<img src="images/photo.png"/>…<img src="../images/photo.png"/>…
    css selectors
    *.st[id$="-2"]
img[src$="photo.png"]
    jQuery 物件語法
    jQuery('[att$=val]') 或 $('[att$=val]')
例： $('img[src$="photo.png"]')
  5. selector[att*=val] (此項為 css 3)
    指出具有 att 屬性且屬性值至少有一段字與 val 完全相符的元素。 val 為空白時，不會指出任何元素。
    語法實例
    html 片段
    <a href="http://tw.info.yahoo.com/SecurityCenter/">…<a href="http://tw.campaign.money.yahoo.com/atm/">…
    css selectors
    a[href*=".yahoo.com"]
    jQuery 物件語法
    jQuery('[att*=val]') 或 $('[att*=val]')
例： $('a[href*=".yahoo.com"]')
  6. selector[att|=val]
    指出具有 att 屬性且屬性值與 val 完全相符的元素，或是由開端至 - (減號) 前字元完全相符的元素。
    語法實例
    html 片段
    <div class="article2">…<div class="article2-1">…<div class="article2-2">…
<a href="http://www.w3.org/" hreflang="en-us">…<a href="http://www.britishmuseum.org/" hreflang="en-uk">…
    css selectors
    div[class|="article2"]
a[hreflang|="en"]
    jQuery 物件語法
    jQuery('[att|=val]') 或 $('[att|=val]')
例： $('div[class|="article2"]')
  7. selector[att~=val]
    指出具有 att 屬性且屬性值有一個字以上以空格分隔，其中一個字與 val 完全相符的元素。 val 為空白時，不會指出任何元素。
    語法實例
    html 片段
    <h2 title="Fashion Taipei">…<h2 title="Culture Taipei">…<h2 title="New Taipei City">…
<a href="../ch1.htm" rel="first start begin">第一頁</a>
    css selectors
    h2[title~="Taipei"]
a[rel~="start"]
    jQuery 物件語法
    jQuery('[att~=val]') 或 $('[att~=val]')
例： $('h2[title~="Taipei"]')

較詳細瀏覽器支援問題及 bugs 討論，可參訪 sitepoint (英文)

思考 - 養成良好的語言撰寫習慣

屬性值的引號 (quotes) 應括出來，尤其在 jQuery attribute selector。₪

如 jQuery ：
$('img[src$=".png"]')
常常有人會為了少打幾個字而省略引號，
$('img[src$=.png]')

本來語法是被寬鬆地允許，但在 jQuery 1.6 以後做了更嚴謹、更快速的處理，「屬性值」如果包含特別的符號，如例中的 . (句號) ，不加引號就會出現語法錯誤。

縱使以變數做為屬性值，也一樣會錯誤，如：
var f='.png';
$('img[src$='+f+']')
標準的寫法應是，
var f='.png';
$('img[src$="'+f+'"]')

有不少以前的 plugin 都已經出現這種錯誤，光除錯就必須再花很多時間，所以養成良好的書寫習慣是重要的，省東省西不見得省時間。

參考資源
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。