CSS - 使用属性选择器还是设置类名？

Question

我们应该使用什么？

css: input[type='submit']{...}

还是为输入标签设置类名？

html: <input type="submit" class="submit">
css: .submit{...}

- StoneHeart

---

我喜欢这个问题，我也想知道在这里什么被认为是“最佳实践”以及为什么。我不是特别关心与旧版IE的兼容性问题。特别是我对如何为<a role='button' href='#'>标签设置样式的“正确”方式感兴趣：选择[role=button]是否可以，还是必须添加class属性？@StoneHeart，你能否编辑你的问题，加入这个具体的带有role属性的例子，以便如果有人仍然有什么要补充的话，可以参与讨论？ - Alexey

Answer 1

如果你想支持IE6，应该使用类名而不是属性选择器。

这篇文章很有趣：

• CSS属性选择器的细节

- Sarfraz

---

但是，如果IE6甚至从供应商处被弃用，为什么我们还要继续支持它呢？旧车报废，旧路重新铺设，旧水管更换，旧电话线...等等，总有一个时刻。我意识到这是一场宗教争论，支持IE6还是不支持IE6，但对于今天的大多数人来说，IE6不是坚持向后兼容的好理由。但是对于一个有效的观点，我会点赞。我只是不同意这个观点。 - jcolebrand

@drachenstern：支持IE6还是忽略它，这是个人的选择。我会尽可能地支持它 :) - Sarfraz

+1 给 drachenstern。人们必须让 IE6 死掉。我仍然惊讶于一些人真的在使用它。 - Octavian Helm

@MAINERROR：我们都讨厌IE6，甚至有些人会讨厌所有版本的IE，但如果我们的用户在使用它，我们却无能为力:(其次，是否支持IE6取决于OP的意愿:) - Sarfraz

当然，我没有说其他的事情。我只是在发泄一下。 :) - Octavian Helm

Answer 2

是的，正如Sarfraz所说，如果您考虑浏览器兼容性，应该选择类名，但属性选择器可以对任何元素提供广泛的控制。

- Starx

---

什么是广泛的控制范围？ - Sarfraz

我认为他的意思是属性选择器允许您进行更细粒度的选择，而无需在HTML中添加额外/冗余的类。 - Ax.

Answer 3

在我看来，这完全取决于你所应用的样式类型 - 当然还有其他人已经提到的一般浏览器支持因素。例如，如果你所应用的是设计的绝对核心部分（例如布局），那么最安全的做法可能是坚持使用类名。

然而，如果你所应用的是“装饰性花纹”，特别是如果它是 CSS，在旧版 IE 中甚至都不支持的（比如 border-radius），那么最好保持你的标记干净，并利用属性选择器。

在类似情况下，你可能认为通过 JavaScript 逐步增强是值得的 - 也就是说，保持标记干净，但使用 JS 向元素添加类或内联样式。

- Bobby Jack