属性选择器与用于样式的类选择器

Question

很多时候我看到这样的代码：

<input type="text"   class="class1" name="text">
<input type="submit" class="class2" name="submit">

然后像这样设计样式：

input[type=text]   { styles here...}
input[type=submit] { styles here...}

为什么不直接使用类选择器（＆＃34; class1＆＃34;和＆＃34; class2＆＃34;在这个例子中）？

这种造型方式更具跨浏览性吗？ （AFAIK attr选择器不能在IE6中工作）

它更快吗？

与我不知道的最佳做法有什么关系吗？

谢谢！

Answer 1

2014年，对浏览器支持属性选择器的唯一情况是，如果您仍在使用依赖于怪异模式IE或通常较旧版本浏览器的遗留代码。你是正确的，属性选择器不适用于IE6。 ¹

如果＆＃34; class1＆＃34;的目的是仅识别input[type=text]元素，＆＃34; class2＆＃34;要识别input[type=submit]元素，那么使用类选择器和使用属性选择器之间没有区别。 ² 如果您正在使用遗留代码，那么使用类来代替属性是精细。否则，除非您将这些类用于其他目的（如脚本），否则它们将是多余的。

哪个更快？谁知道？众所周知，浏览器对具有单个类选择器的规则进行了特定的优化，但是这是否转换为实际节省的时间是另一个问题，除非选择器确实是您的瓶颈，否则不值得考虑。

---

¹ _{人们一直指出，只有当您出于某种原因包含doctype时，属性选择器才能在IE7和IE8上工作。这几乎适用于IE的每个版本，老实说，如果你还没有使用doctype，那么你可能有很好的理由，在这种情况下你甚至不应该考虑使用任何现代的CSS功能。}

² _{值得注意的是，如果您只选择.class1而不是input.class1，您将失去input的特异性选择器。}