哪个 CSS 选择器更快？答案

【问题标题】：Which CSS selector is faster?哪个 CSS 选择器更快？
【发布时间】：2015-10-18 15:21:18
【问题描述】：

哪个选择器更快：input[type='text'] 或 [type='text']？

在 jQuery 中是第二个，但在 CSS 中？

我认为仍然是[type='sth']，因为浏览器“不那么具体，阅读时间也更短”。

【问题讨论】：

谈微优化...
可以衡量一下差异吗？在什么样的文件上——它需要多少元素（匹配和/或不匹配）会产生可衡量的差异？我想有人可能会推测同时包含元素类型和属性会提供更多的特异性（当然在 DOM 中更容易检查元素类型，但 CSS 引擎是否使用 DOM？）。正如@ɴᴀᴛʜ所说：除非您可以衡量实际文档中的差异，否则请关注代码的清晰度。
我的问题只是理论上的...... :) 我知道现代浏览器可以快速解释 CSS，并且 input[type='text'] 和 type['text'] 之间没有真正的性能提升。我读过这篇文章：link。简而言之，它表示如果选择器不太具体（当然取决于它们的种类），页面渲染速度会更快。所以，我想知道哪个选择器更快，因为 input[type='text'] 比第二个更具体。
在现代浏览器中，css通常不是你需要担心的第一件事。SQL查询或javascript应该写得好，然后跟着css..只是我的意见

【解决方案1】：

CSS performance check 这取决于浏览器。

【讨论】：

【解决方案2】：

两者都更快，不同之处在于[type='sth']将应用于包括非输入标签在内的所有元素。

 <link type="sth">

此标签将应用于您的课程。

【讨论】：

【解决方案3】：

这个问题毫无意义——答案必须包括特定浏览器的特定版本、特定的 HTML 文件、特定的 css 文件、特定的 Javascript 和确切的场景。此外，您必须定义“更快”：解析速度更快？从文档中查询更快？更快地猜测特定标签是否符合规则？

几年前，当浏览器很简单时，这还是有道理的。现代浏览器的优化可以与现代数据库或编译器相媲美，这使得微基准测试成为一个争论点。可能有任意数量的快速路径、异常、极端情况、常见情况的捷径，使这种简单的推理变得不可能。

【讨论】：

【解决方案4】：

在 CSS 中，没有办法检测哪个更快，但您可以知道哪些 CSS 属性值与元素最相关： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：