Question

儿童组合子：

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

同样的事情可以用不那么具体的方式来表示（层叠，或者它被称为其他东西？）：

#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)

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

儿童组合子与级联：哪个性能更好，效率更高？

我的用例

我猜？

1 个答案: