javascript - 子组合器与级联 : Which is better performant and efficient?

Question

子组合器:

#main-navigation-wrapper > .main-navigation > .top-nav > .top-menu > .in {
    /* some styling */
}

同样的东西可以用不那么具体的方式来表示(Cascading，或者叫别的东西？？):

#main-navigation-wrapper .main-navigation .in {
    /* some styling */
}

从理论上讲，根据给定的示例，两者中哪一个性能和效率更高？ (请不要说它可以忽略不计。)

我的用例

由于社区成员一直建议我在我的问题中描述我想要实现的目标，所以这里开始吧。

我使用 Twitter Bootstrap对于某些 JavaScript 效果，这是我使用的片段:

!function ($) {

  "use strict"; // jshint ;_;


 /* COLLAPSE PUBLIC CLASS DEFINITION
  * ================================ */

  var Collapse = function (element, options) {
     this.$element = $(element)
     this.options = $.extend({}, $.fn.collapse.defaults, options)

     if (this.options.parent) {
       this.$parent = $(this.options.parent)
     }

     this.options.toggle && this.toggle()
  }

  Collapse.prototype = {

     constructor: Collapse

  , dimension: function () {
       var hasWidth = this.$element.hasClass('width')
       return hasWidth ? 'width' : 'height'
     }

  , show: function () {
       var dimension
         , scroll
         , actives
         , hasData

       if (this.transitioning) return

       dimension = this.dimension()
       scroll = $.camelCase(['scroll', dimension].join('-'))
       actives = this.$parent && this.$parent.find('> .main-navigation > .top-nav > .top-menu > .in')

       if (actives && actives.length) {
         hasData = actives.data('collapse')
         if (hasData && hasData.transitioning) return
         actives.collapse('hide')
         hasData || actives.data('collapse', null)
       }

  /* and the code goes on... */

}(window.jQuery);

在代码中查找这个 -- > .main-navigation > .top-nav > .top-menu > .in。

现在，我应该使用那个，还是这个 > .main-navigation .in？这是我的问题，推理应该基于哪个提供更好的性能，哪个更高效。

如果我不够清楚，请告诉我。

我的猜测？

我认为这个 (#main-navigation-wrapper > .main-navigation > .top-nav > .top-menu > .in) 更有效率和性能，因为我相信它有帮助浏览器快速识别元素。不过我可能是错的，这就是我问的原因。

Answer 1

所有的评论都是正确的，影响可以忽略不计。

此外，重要的是这两个规则不相同。在某些情况下，它们会给出截然不同的结果。因此，选择一个或另一个不是性能问题，而是获得您真正想要的东西的问题。

说了这么多，你是对的，子规则如果正确的话会更有效率。

如果您正在编写规则，并且您了解自己的 DOM，并且规则没有过于具体，那么效率会更高。编写过于具体的规则是一个您可以避免的问题，因为您了解自己的 DOM，但框架编写者无法避免。

真正不同的是当你有很多内容的时候

#main-navegation-wrapper not(.main-navigation)

第一条规则甚至不处理，第二条必须处理