简化/组合嵌套的 LESS答案

【问题标题】：Simplifying/combining nested LESS简化/组合嵌套的 LESS
【发布时间】：2016-09-13 04:20:08
【问题描述】：

我有以下 LESS：

ul.dropdown-menu {
  padding-top: 0;
  z-index: 2010;
  li:first-child {
    a.disabled.heading {
      &.availableAction {
        border-top: none;
        margin: 0;
      }
    }
  }
}

有没有办法组合 li:first-child、a.disabled.heading 和 &.availableAction 选择器？

【问题讨论】：

标签： css less

【解决方案1】：

你的意思是这样吗？

ul.dropdown-menu {
  padding-top: 0;
  z-index: 2010;
  li:first-child a.disabled.heading.availableAction {
    border-top: none;
    margin: 0;
  }
}

LESS 支持嵌套，但从不要求您使用它。

未要求备注 :)

希望 z-index 看起来随意且庞大是有原因的
如果可能，请设计您的选择器名称，以便您可以说 .dropdown-menu 而不是 ul.dropdown-menu - 浏览器处理第一个比第二个更快
如果可能，最好使用比ul.dropdown-menu li:first-child a.disabled.heading.availableAction 不太具体的选择器。同样，浏览器将更快地处理.dropdown li:first-child .availableAction 之类的内容（并且li:first-child .availableAction 甚至更快，但我可以想象这可能会针对您不想定位的内容），并且它会让您更容易覆盖样式与级联中的其他类。

【讨论】：