css attribute selectors (css 屬性指標)

  • 說明:attribute selector 是善用元素 (elements) 既有的屬性 (attributes) 來指出元素,可有效降低不斷為元素命名 idclass 的麻煩。用在程式動態產生的 html ,又不能預先指定 idclass 的元素,也會很有助益;或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出,這部分瀏覽器都可支援。
  • 適合:有 htmlcss 語法基礎概念者。
  • 難度:等級2
  • 更新:
  • 支援: firefox, safari, google chrome, opera, ie8, ie7-未支援 css3 (至撰文時)。
  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 授權條文,禁止重混,引述請增加原文連結。
文章標籤
創作者介紹

網頁藝術思考 - CSS 網頁設計藝術, 友善的無障礙網頁

不惑仔 發表在 痞客邦 PIXNET 留言(0) 人氣()