在 Less 中,你可以使用 & 符号来合并选择器,将父选择器和子选择器合并为一个完整的选择器。这使得在嵌套规则中引用父选择器更加灵活。

以下是一个简单的例子:
// 合并选择器
.button {
  color: black;

  &:hover {
    color: red;
  }

  &.active {
    background-color: yellow;
  }

  &.disabled {
    opacity: 0.5;
  }
}

在这个例子中,& 符号用于合并选择器,生成完整的选择器规则。例如,.button:hover 将生成按钮在悬停状态时的样式。

另外,你还可以在嵌套规则中使用 & 符号引用整个父选择器:
// 使用 & 引用整个父选择器
.container {
  padding: 10px;

  .item {
    margin: 5px;
  }

  &:hover {
    background-color: #eee;
  }
}

在这个例子中,:hover 规则中的 & 引用了整个 .container 选择器,生成 .container:hover 的样式规则。

合并选择器是 Less 中一种强大的功能,它使得样式表的书写更加简洁和灵活。


转载请注明出处:http://www.zyzy.cn/article/detail/4299/Less