1

子组合器：

#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) 更加高效和高效，因为我相信它可以帮助浏览器快速识别元素。不过我可能是错的，这就是我问的原因。

4

1 回答 1

0

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

此外，重要的是两条规则不相同。在某些情况下，它们会给出非常不同的结果。所以，选择一个或另一个不是性能问题，而是得到你真正想要的东西。

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

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

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

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

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

于 2013-02-01T22:10:45.677 回答