我知道在 jQuery 中，使用选择器时更具体是有利的，这样 jQuery 就不必遍历整个 DOM 来查找您要查找的内容。例如，如果我知道 description 类只应用于 <span> 元素，$('span.description') 就比 $('.description') 要好。
CSS 也是这样吗？使用span.description { } 代替.description { } 对我有什么特别的好处吗？我正在考虑速度、优化等方面。我是否通过告诉浏览器确切的位置来节省浏览器的任何工作？
【问题讨论】：
标签： css optimization browser css-selectors
据我所知，您的选择器的具体程度对性能影响不大。
更具体的选择器最有用的两个领域是，降低在您不想要的地方不应用它的风险，并使一个选择器优先于另一个。
【讨论】：
这在 CSS 中是正确的 -
一个好的规则是从最近的 ID 下降。 ID 已编入索引，因此定位它们非常快。没有理由在选择器中使用多个。
Google Code- Optimize browser rendering
这回答了我关于这个主题的很多问题，包括这个- 我希望你觉得它有用。
【讨论】：
#id span）下降是高效的，而实际上（如链接文章所述），它是“键选择器”或最右边的选择器，对选择器产生最深远的影响性能。
它总是取决于您的 html 代码量和结构。使用 id 和适当的选择器绝对是个好主意。 （即#nav li 而不是 li.nav）。由于浏览器首先加载 html，然后应用 css，因此您帮了很多忙。
这就是说，当谈到纯 css（没有 jquery）时，速度上的差异现在不容易区分，因为渲染引擎已经高度优化 - 特别是在应用 css 时。所以通常情况下应该没关系。
【讨论】：
更具体的规则优先于不太具体的规则，因此：
span.myclass {}
优先于：
.myclass {}
（无论声明规则的顺序如何）
【讨论】：
阅读 css 的特殊性 - 这是你的 css 或多或少具体的最重要原因。
http://www.w3.org/TR/CSS2/cascade.html#specificity
由于浏览器性能几乎不是问题（正如您所提到的，在 jquery 中除外），我的指导方针是在您控制优先级或想要使某些内容在你的CSS。过度指定会使重用 css 选择器变得很棘手，并使事情变得过于复杂。
编辑
这看起来有点重复：
【讨论】：