CSS中使用屬性選擇器選取元素

Question

在CSS中，是否可以透過HTML5的data屬性（例如，data-role）來選擇元素？

Answer 1

也可以在現代瀏覽器中選擇屬性，而不考慮其內容。

使用以下程式碼：

[data-my-attribute] {
   /* 样式 */
}

[anything] {
   /* 样式 */
}

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

#適用於大部分瀏覽器。

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

Answer 2

如果您是指使用屬性選擇器，當然可以：

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

有各種各樣的屬性選擇器可用於不同的場景，這些場景都在我提供的文件中有詳細介紹。請注意，儘管自訂資料屬性是一個“新的HTML5功能”，

• 瀏覽器通常沒有問題支援非標準屬性，因此您應該能夠使用屬性選擇器進行過濾；並且

• 您也不必擔心CSS驗證，因為只要不破壞選擇器語法，CSS不關心非命名空間屬性名稱。