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

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...}

为什么不直接使用类选择器(本例中为“class1”和“class2”)？

这种样式化方式是否更跨浏览器？ (AFAIK attr 选择器在 IE6 中不起作用)

它更快吗？

它与我不知道的一些最佳实践有什么关系吗？

谢谢!

Answer 1

在 2014 年，跨浏览器对属性选择器的支持成为问题的唯一情况是，如果您仍在处理依赖于 quirks 模式 IE 或一般较旧版本浏览器的遗留代码。您是正确的，属性选择器在 IE6 上不起作用。¹

如果“class1”的目的是仅识别input[type=text]元素，“class2”仅识别input[type=submit]元素，那么使用类选择器和使用属性选择器之间没有区别。² 如果您使用的是遗留代码，那么使用类代替属性就可以了。否则，除非您将这些类用于其他目的(例如脚本)，否则它们是多余的。

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

---

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

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