在CSS中使用非常特定的选择器是否有优势？

Question

我理解在jQuery中，使用选择器时更具体是有利的，这样jQuery就不必遍历整个DOM来找到你想要的东西。例如，如果我知道$('span.description')类仅应用于$('.description')元素，description优于<span>。

这也是CSS的情况吗？使用span.description { }代替.description { }对我有什么特别的好处吗？我在思考速度，优化等方面。我是否通过告诉它确切的位置来保存浏览器的任何工作？

Answer 1

在CSS中也是如此 -

一个好的规则是从最近的ID下降。 ID被编入索引，因此定位它们非常快。没有理由在选择器中使用多个。

Google Code-优化浏览器呈现

我回答了很多关于这个问题的问题，包括这个问题 - 我希望你觉得它很有用。

Answer 2

了解css特异性 - 这是与css或多或少具体相关的最重要原因。

http://www.w3.org/TR/CSS2/cascade html的＃特异性

由于浏览器性能几乎不是问题（正如你所提到的那样，除了jquery之外），我的指导方针是在你控制优先级时，或者你想要使某些内容更具可读性时具体。你的CSS。过度指定会使重用css选择器变得棘手，并使事情变得过于复杂。

修改

这看起来有点重复：

CSS效果问题

Answer 3

它总是取决于你的HTML代码和结构的数量。使用特别的ID和适当的选择器绝对是个好主意。 （即#nav li而不是li.nav）。由于浏览器首先加载html，然后应用css，你正在帮助很多。

这就是说，当谈到纯css（没有jquery）时，速度的差异现在不容易区分，因为渲染引擎是高度优化的 - 特别是在应用css时。所以通常没关系。

Answer 4

据我所知，您的选择器的具体程度与性能差别不大。

更具体选择器最有用的两个方面是降低在不需要它的地方不应用的风险，并使一个选择器优先于另一个选择器。

Answer 5

更具体的规则优先于不太具体的规则，因此：

span.myclass {}

优先于：

.myclass {}

（无论宣布规则的顺序如何）