理解 CSS 语法，& + &

Question

我正在查看 .css 文件中的以下选择器：

.tab {

    flex: 1 0 auto;
    height: 52px;

    & + & {
        border-left: 1px solid;
    }

}

我不熟悉的语法& + & {}- 这是什么意思？

Answer 1

这不是 CSS，而是一些要编译为 CSS 的文件。它可能是 SCSS 或更少。

在SCSS和Less 中，这&只是封闭选择器的重复。

所以

& + & {
    border-left: 1px solid;
}

将被翻译为

.tab + .tab {
    border-left: 1px solid;
}

当您需要在项目之间添加边框时，这种构造很常见：您将它添加到任何跟在另一个项目之后的项目的左侧。

理解 CSS 语法，&amp; + &amp;