css - 少&+&不扩

Question

According to the docs如果我做类似的事情:

.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;
    }
  }
}

但它不起作用。为什么不呢？

DEMO

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 转换为 th 有一个祖先 table，其前一个兄弟是一个 td 有一个祖先 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;
}

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