我发现使用css属性选择器来设置网页样式非常有用，因为对我来说，它似乎比我使用class=""或id=""时更快（编写/阅读代码） 。
使用属性选择器设置网页样式是一种好习惯吗？而且，这适用于旧浏览器吗？
HTML：
<div data-header></div>
CSS：
div[data-header] {
/* style here */
}
答案 0 :(得分：0)
使用属性的一个问题是，它们总是绑定到一种类型的html元素..所以在上面的例子中，data-header只能应用于div ...如果你想应用相同的样式以<p>标签为例..您将不得不再次编写样式：
p[data-header]
并且因为你所谈论的唯一优势是它需要更少的打字..那么这是一个微不足道的优势（即我们不是在谈论更少的处理或渲染时间或增加可维护性等）
我建议你考虑Object Oriented CSS（OOCCSS）的原则：它有这个关键原则：
无论你把它放在哪里，对象都应该看起来一样。因此，不要使用.myObject h2 {...}设置特定的h2样式，而是创建并应用描述相关h2的类，例如h2 class =“category”。
这使得你的css更加可重用.. css管理能力差的一个常见问题是你很容易就会得到数千行的css ..其中大部分都是多余的。
有关OOCCSS如何使css更可重用的具体示例..请参阅此answer
重要更新：我上面所说的有一个类比一个属性更可重用的方面是不正确的（见下面的讨论）..所以请忽略它。
现在正在说..我仍然避免仅使用属性来设置我的html样式..如果因为你使用css属性的唯一原因而不是它的设计用于
（一般来说，对你的代码太聪明并不是一个好主意..虽然它可以节省你的时间等等。它可能会让以后会使用你的代码的人感到困惑..总是以其他人的态度编码来自世界各地的人可能会得到你的代码......所以可读性胜过代码等等。尤其是当没有其他优势时，例如处理时间等。）
例如（我说这个甚至没有做任何研究..我只是依靠使用css的10年以上的exp）..如果我在你的代码中看到这个
<div data-header>
我不知道这个数据标题是否是一个唯一的选择器，或者是否存在于其他地方..但如果我看到这个：
<div class="data-header">
然后我可以立即得出结论（无需查看代码中的任何其他内容）这是不一个唯一的选择器..并且我很期望在同一页面中看到其他元素甚至其他具有相同类别的页面应用于它们。（即与使用<div id="data-header">相反...然后是唯一的）
假设我是javascript / jQuery的家伙，而你只是设计师...这是一个不言而喻的信息，你只是凭借你设计的方式使用CSS。但后来如果开始变得聪明并且以自己的方式使用CSS属性..那就是麻烦的方法（请参阅我的问题here以及我在其下做出的评论..获得意味着x的东西是个坏主意为每个人而且让它意味着你只是为了你）。