問題描述

是否可以通過 HTML5 數據屬性 (例如，data-role) 在 CSS 中選擇元素？

最佳解決方案

如果您的意思是使用 attribute selector，那麼，為什麼不：

[data-role="page"] {
    /* Styles */
}

有各種各樣的屬性選擇器可以用於各種場景，這些場景都在我鏈接到的文檔中。請注意，儘管自定義數據屬性是 「新的 HTML5 功能」，

  • 瀏覽器通常沒有任何支持 non-standard 屬性的問題，所以您應該能夠使用屬性選擇器進行過濾; 和

  • 您不必擔心 CSS 驗證，因為 CSS 不關心 non-namespaced 屬性名稱，只要它們不會中斷選擇器語法。

次佳解決方案

在現代瀏覽器中，也可以選擇屬性，而不管其內容如何

有：

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

例如：http://codepen.io/jasonm23/pen/fADnu

在很大一部分瀏覽器上工作。

注意這也可以在 JQuery 選擇器中使用，或者使用 document.querySelector

第三種解決方案

值得注意的是 CSS3 子字符串屬性選擇器

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。