css attribute selectors (css 屬性指標)

  • 說明：attribute selector 是善用元素 (elements) 既有的屬性 (attributes) 來指出元素，可有效降低不斷為元素命名 id 或 class 的麻煩。用在程式動態產生的 html ，又不能預先指定 id 或 class 的元素，也會很有助益；或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出，這部分瀏覽器都可支援。
  • 適合：有 html 及 css 語法基礎概念者。
  • 難度：等級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 selector attribute att val 屬性 jquery selectors

不老師 發表在 痞客邦 留言(0) 人氣()