Question

我有以下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选择器？

Answer 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甚至更快，但我可以想象这可能会针对您不想定位的内容），并且它会让您更轻松在级联中进一步覆盖其他类的样式。

简化/组合嵌套的LESS

1 个答案: