css - 少 & + & 不展开

Question

根据文档，如果我执行以下操作：

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

我应该得到这样的规则：

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

所以我正在做类似的事情：

table {
  width: 100%;
  td, th {
    text-align: right;
    & + & {
      text-align: left;
    }
  }
}

但它不起作用。关于为什么不的任何想法？

演示

Answer 1

使用http://winless.org/online-less-compiler对我来说效果很好，这是输出：

table {
  width: 100%;
}
table td,
table th {
  text-align: right;
}
table td + table td,
table td + table th,
table th + table td,
table th + table th {
  text-align: left;
}

我认为问题在于您在生成该功能& + &时错误地使用了该功能，table td + table td这会转化为thwho has an parentstable其前一个兄弟姐妹是tdwho has an parents table。

我假设您的意思table td + th, ...是您应该使用+ th, + td

table {
  width: 100%;
  td, th {
    text-align: right;
    + th, + td {
      text-align: left;
    }
  }
}

产生：

table {
  width: 100%;
}
table td,
table th {
  text-align: right;
}
table td + th,
table th + th,
table td + td,
table th + td {
  text-align: left;
}

只是为了澄清，它没有像你想象的那样工作的原因是因为它&代表了当前的选择器，包括“当前”之前的所有内容。