Utiliser des sélecteurs d'attributs pour sélectionner des éléments en CSS

Question

En CSS, est-il possible de sélectionner des éléments via l'attribut de données HTML5 (par exemple, data-role) ?

Answer 1

Les attributs peuvent également être sélectionnés dans les navigateurs modernes quel que soit leur contenu.

Utilisez le code suivant :

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

[anything] {
   /* 样式 */
}

Par exemple : http://codepen.io/jasonm23/pen/fADnu

Applicable à la plupart des navigateurs.

Notez que cela fonctionne également dans les sélecteurs JQuery ou en utilisant document.querySelector.

Answer 2

Si vous souhaitez utiliser des sélecteurs d'attributs, vous pouvez bien sûr :

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

Il existe une variété de sélecteurs d'attributs qui peuvent être utilisés pour différents scénarios, qui sont détaillés dans la documentation que je fournis. Veuillez noter que bien que les attributs de données personnalisés soient une « nouvelle fonctionnalité HTML5 »,

• Les navigateurs n'ont généralement aucun problème à prendre en charge les attributs non standard, vous devriez donc pouvoir filtrer à l'aide des sélecteurs d'attributs et

   ;

• Vous n'avez pas non plus à vous soucier de la validation CSS, car CSS ne se soucie pas des noms d'attributs non-espaces de noms tant qu'il ne casse pas la syntaxe du sélecteur.