Question

关于changing selector order的文档，我们可以看到这个例子：

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

，结果将是

.no-borderradius .header .menu {}

如何使用父选择器 &来获取选择器.header .menu.no-borderradius而不重复代码：

ul {
    li {
        a {
            .active &,
            &:hover {
                 color: red;
            }
        }
    }
}

将提供CSS

.active ul li a {color: red;}

但要求的结果是

ul li.active a {color: red;}

Answer 1

您已将&（父选择器）放在错误的位置。它不应该放在选择器之后，而应该放在.之前。在选择器之后设置&意味着整个父选择器（来自最顶层的选择器）将附加在当前选择器的末尾而不是之前插入（这是.header .menu.no-borderradius或{所需的内容{1}}。

ul li.active

关于问题的更新 - 使用以下结构目前无法实现 .header { .menu { border-radius: 5px; &.no-borderradius { /* here & is equal to .header .menu */ background-image: url('images/button-background.png'); } } } ul { li { &.active, /* here & is equal to ul li */ &:hover { color: red; } } }，因为父选择器意味着整个选择器链直到当前级别而不仅仅是直接的父母。没有办法选择直接的父母。

ul li.active a

目前唯一可行的选择就是编写如下：

ul {
  li {
    a {
      .active &,
      &:hover {
        color: red;
      }
    }
  }
}

父级选择器有open feature request有目标，但没有决定何时完成。

第一个父级的父选择器较少

1 个答案: